club762.ruИспользование диалоговых окон — отличный способ для оповещения людей и привлечения их внимания к важной информации. Естественно, при этом посетители ресурса должны понимать, какие действия необходимо выполнить, чтобы перейти к следующему шагу.
Наш клиент остался доволен реализацией вкладок и созданием сайдбара-аккордеона. Теперь он нуждается в еще одном улучшении. Первая вкладка на домашней странице предлагает загрузку PDF отчета, который содержит в себе информацию о методологии, товарах и их дополнительном использовании. Как вы можете увидеть на следующем скриншоте, клиент хочет, чтобы пользователи осознавали, что они загружают защищенные авторским правом материалы, которые не могут свободно распространяться.
Сразу перед ссылкой на скачивание находится небольшое предупреждение, говорящее о том, что пользователь соглашается со всеми условиями лицензии, если он решил скачать файл.
Вообще говоря, эти требования вызваны юридической необходимостью, однако их реализация на текущий момент оставляет желать лучшего. Мы внесем некоторые изменения в процесс загрузки отчета, сделав ссылку для скачивания более заметной с помощью виджета Button, а также поместим текст Disclaimer в отдельное диалоговое окно. Пользователь должен будет нажать на кнопку I Agree, чтобы продолжить процесс загрузки, а клиент получит уверенность в том, что большинство людей, загружающих отчет через поддерживающий Javascript браузер, прочли требования опубликованного соглашения.
Для начала, давайте установим текст Disclaimer для вывода в диалоговом окне. Нам необходимо будет получить параграф и применить к нему виджет Dialog:
...
//выбираем тег p, содержащий текст Disclaimer
jQuery("#post-98 p:contains(Disclaimer:)")
.wrapAll("<div id='disclaimer'></div>");
//создаем виджет Dialog для полученного текста
jQuery("#disclaimer").dialog();
... Если вы перезагрузите теперь страницу, то увидите, что текст Disclaimer будет выведен в отдельном диалоговом окне:
По умолчанию, текст в диалоговом окне будет выровнен по центру. Это очень удобно для одиночной строки текста, однако в случае с нашим соглашением такое выравнивание смотрится не слишком хорошо, поэтому мы установим выравнивание по ширине через .wrapAll:
...wrapAll("<div id='disclaimer' style='text-align:justify'></
div>");...Теперь приступим к настройке диалогового окна. Нам не требуется, чтобы оно всегда выводилось на экран, поэтому мы изменим значение параметра autoOpen на false. Помимо этого, мы хотим, чтобы диалоговое окно обладало несколькими кнопками. Виджет dialog позволяет внести указанные изменения:
...
//создаем виджет dialog
jQuery("#disclaimer").dialog({
//устанавливаем скрытие диалога
autoOpen: false,
//устанавливаем заголовок диалога
title: 'Download Agreement',
// устанавливаем две кнопки
buttons: {
//активируем URL расположенный в атрибуте href
"I Agree": function() {
//получаем URL
var pdfFile = jQuery("#post-98 a").attr('href');
//передаем браузеру URL
window.location.href = pdfFile;
},
//закрываем диалог
"Close" : function() {
jQuery(this).dialog("close");
}
},
});
... Теперь нам понадобится убедиться в том, что когда мы находимся в диалоговом окне, загрузка файла не будет начата до тех пор, пока мы не щелкнем по кнопке I Agree. Возможное решение — использование функции .removeAttr(), которая позволяет удалить атрибут href у ссылки, тем самым сделав ее бессильной. Это хорошая идея, однако она не лишена недостатков. В предыдущем фрагменте кода мы задаем атрибут href для ссылки. Если мы используем функцию .removeAttr(), то наш window.location.href не сможет никуда перейти.
Более подходящим решением является использование функции preventDefault(), которая сохранит все атрибуты ссылок неповрежденными, и при этом будет препятствовать различным действиям, таким как щелчок мыши. Давайте добавим указанную функциональность:
...
jQuery("#post-98 a")
//устанавливаем функцию click для ссылки
.click(function(event){
//открываем диалог
jQuery("#disclaimer").dialog("open");
//гарантируем, что ссылка в данный момент отключена
event.preventDefault();
});
...Наконец, перед тем как обновить страницу и посмотреть наше новое решение в действии, давайте внесем последнее изменение. Все, что нам осталось сделать, это выполнить некоторую стилизацию ссылки для скачивания PDF. Так как мы используем jQuery 1.4.2 из Google CDN и версию jQuery UI 1.8, мы можем добавить виджет Button к ссылке:
Мы подцепим функцию .button() к уже существующей выборке ссылок, после функции .click():
...
jQuery("#post-98 a")
//set up a click function on the link
.click(function(event){
//open the dialog box
jQuery("#disclaimer").dialog("open");
//ensures that the link to the href is disabled
event.preventDefault();
})
//add the button widget
.button();
...Теперь мы можем обновить страницу и протестировать работоспособность нашего нововведения:
Однако мы не остановимся на этом шаге и добавим к нашему диалогу специальные иконки рабочей среды (framework icons). Плагин jQuery UI поставляется вместе с набором стандартных иконок, которые используются в различных приложениях. Если вы подключали папку image к таблице стилей jQuery UI, то у вас есть доступ к этим иконкам.
Виджет Button позволяет устанавливать иконки в «основную» («primary») и «второстепенную» («secondary») позиции. Основная позиция — это позиция слева от кнопки, второстепенная позиция — позиция справа от текста кнопки. Давайте добавим к нашей кнопке иконки «circle-arrow-s» и «document»:
...
jQuery("#post-98 a")
//set up a click function on the link
.click(function(event){
//open the dialog box
jQuery("#disclaimer").dialog("open");
//ensures that the link to the href is disabled
event.preventDefault();
})
//add the button widget
.button({
//add the icons
icons: {primary:'ui-icon-circle-arrow-s',
secondary:'ui-icon-document'}
});
...На скриншоте представлена наша графическая кнопка и диалоговое окно, которое вызвано нажатием этой кнопки:
Щелчок по кнопке I Agree приводит к появлению окна загрузки файла:
Даже если мы отключим Javascript, мы не потеряем функциональности: пользователи по-прежнему смогут загрузить файл, ознакомившись с предупреждением. Это действительно грандиозное использование связки jQuery и jQuery UI.
