автордың кітабынан сөз тіркестері HTML5 и CSS3. Веб-разработка по стандартам нового поколения
Новичкам я бы порекомендовал сначала прочитать книгу Джона Дакетта HTML and CSS: Design and Build Websites [Duc11], в ней хорошо излагаются основы. Также стоит обратить внимание на книгу Джеффри Зельдмана Designing with Web Standards [Zel09]
9 Ұнайды
Новичкам я бы порекомендовал сначала прочитать книгу Джона Дакетта HTML and CSS: Design and Build Websites [Duc11], в ней хорошо излагаются основы. Также стоит обратить внимание на книгу Джеффри Зельдмана Designing with Web Standards [Zel09].
1 Ұнайды
с улучшенной доступностью.
13 https://developer .mozilla.org/en-US/docs/Web/CSS/clear
14 http://code.google.com/p/html5shiv/
15 http://lea.verou.me/polyfills/progress/
16 http://jqueryui.com/
1 Ұнайды
<progress>
Отображение информации о ходе некоторой операции в реальном времени. [C8, F6, S6, IE10, O11]
Определение статьи (логически завершенного блока контента). [C5, F3.6, S4, IE8, O10]
<section>
Определение логической области страницы или группировка контента. [C5, F3.6, S4, IE8, O10]
Подобные ситуации часто встречаются при создании любых приложений с использованием JavaScript. Как мы уже видели, высоту и ширину окна желательно хранить в коде, но решение с onclick() имеет много недостатков. Тем не менее эти данные можно встроить в атрибуты элемента. Для этого ссылка должна строиться следующим образом:
html5_popups_with_custom_data/popup.html
<a href="help/holiday_pay.html"
data-width="600"
data-height="400"
title="Holiday Pay"
class="popup">Holiday pay</a>
Теперь остается лишь изменить написанное нами событие click, чтобы оно получало значения из пользовательских атрибутов данных ссылки и передавало их методу window.open().
html5_popups_with_custom_data/popup.html
$("a.popup").click(function(event){
event.preventDefault();
var link = this;
var href = link.getAttribute("href");
var height = link.getAttribute("data-height");
var width = link.getAttribute("data-width");
window.open (href,"popup",
"height=" + height +",width=" + width + "");
});
jQuery используется исключительно для обработки события click(). Элемент, на котором был сделан щелчок, представлен в функции-обработчике ключевым словом this. Используя getAttribute(), мы получаем все необходимые атрибуты из элементов для создания всплывающего окна.
Вот и все! Ссылка открывается в новом окне.
если этот код генерируется каким-то серверным кодом, то размер итогового кода HTML получается намного больше необходимого.
Вместо этого назначьте каждому якорю на странице идентифицирующий класс.
html5_popups_with_custom_data/original_example_3.html
<a href="help/holiday_pay.html" class="popup">Holiday Pay</a>
Чтобы обработка событий не создавала проблем совместимости, мы воспользуемся jQuery. В конце страницы, непосредственно перед закрывающим тегом <body>, подключите библиотеку jQuery.
html5_popups_with_custom_data/original_example_3.html
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1
/jquery.min.js'>
</script>
Затем прямо под этой строкой добавьте новый тег <script> со следующим кодом:
html5_popups_with_custom_data/original_example_3.html
$("a.popup").click(function(event){
event.preventDefault();
window.open(this.getAttribute('href'));
});
Мы используем селектор jQuery для получения элемента с классом popup, после чего добавляем наблюдателя для события click для каждого элемента.
Улучшение доступности
В ссылке не задан адрес места назначения! Если пользователь отключит JavaScript, то ссылка не приведет его на нужную страницу. Это серьезная проблема, которую необходимо решать немедленно. Никогда не опускайте атрибут href и не присваивайте ему фиктивные значения — ни при каких условиях. Присвойте адрес ресурса, который должен открываться во всплывающем окне.
html5_popups_with_custom_data/original_example_2.html
<a href='holiday_pay.html'
onclick="window.open(this.href,WinName,'width=300,height=300');">
Holiday pay
</a>
Код JavaScript читает адрес ссылки из атрибута href присоединенного элемента.
Чтобы ваши страницы обладали хорошей доступностью, прежде всего убедитесь в том, что вся функциональность работает без JavaScript. Написать интерактивную часть JavaScript на таком фундаменте может быть намного проще.
На странице отдела кадров AwesomeCo находятся ссылки, которые выводят справочную информацию во всплывающих окнах. Большинство из них выглядит так:
html5_popups_with_custom_data/original_example_1.html
<a href='#'
onclick="window.open('help/holiday_pay.html',WinName, 'width=300,height=300') ;">
Holiday pay
</a>
Такой способ создания ссылок, открывающих всплывающие окна, весьма широко распространен. Собственно, многие начинающие программисты на JavaScript учатся создавать всплывающие окна именно таким образом. Однако у этого способа имеются свои недостатки, о которых необходимо упомянуть, прежде чем двигаться дальше.