От автора: При создании сайтов очень часто необходимо выводить различную информацию в виде выпадающего списка, образованного при помощи тегов select. Поэтому в данном уроке мы с Вами рассмотрим виджет Selectmenu библиотеки JQuery UI, при помощи которого очень быстро и легко можно изменить стандартный вид выпадающих списков.
Установка библиотек
Для сегодняшнего урока мы будем использовать следующий сайт.
В шапке данного сайта есть выпадающий список из категорий. Его вид мы и будем менять в данном уроке.
Первым делом перейдем на сайт http://jquery.com и скачаем библиотеку jquery. Затем переходим на официальный сайт http://jqueryui.com библиотеки JQuery UI, далее на вкладку Download и скачиваем данную библиотеку.
По необходимости можно сгенерировать собственную цветовую схему для данной библиотеки, перейдя по ссылке design a custom theme. Далее подключаем скачанные библиотеки:
<script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/script1.js"></script>
Файл script.js — это пустой файл, в котором мы будем писать скрипты на языке JavaScript. Также необходимо подключить стили библиотеки JQuery UI:
<link rel="stylesheet" href="css/jquery-ui.css"/>
Работа с виджетом Selectmenu
Выпадающий список категорий содержится в блоке с идентификатором menu, поэтому при помощи библиотеки jQuery выбираем данный блок и вызываем метод selectmenu.
$("#menu").selectmenu();
Теперь давайте перейдем в браузер и посмотрим, как изменился внешний вид выпадающего списка:
Как вы видите выпадающий список выглядит как обычное меню. Теперь давайте рассмотрим настройки данного виджета. В качестве настроек мы обращаемся к соответствующим свойствам виджета и устанавливаем определенные их значения. Обращение к свойствам осуществляется следующим образом:
$("#menu").selectmenu({ appendTo:".header",});
appendTo в данное свойство мы можем передать селектор блока в котором будут располагаться временные элементы виджета.
disabled — если в данное свойство передать значение True, то виджет будет отключен и выбрать одно из его значений будет не возможно.
Свойство icons предоставляет возможность задать класс для отображения кнопки виджета (правое небольшое изображение показывающее, что меню выпадающее):
$("#menu").selectmenu({ icons:{ button:"ui-icon-circle-minus" } });
На экране мы увидим следующее:
Для позиционирования выпадающего блока применяется свойство position:
$("#menu").selectmenu({
position: {
my:"left+10 top",
at:"left top+20"
},
});
Свойству position устанавливаем значением объект со следующими свойствами: my — свойство определяет точку на позиционируемом элементе, относительно которой будет происходить выравнивание. Задается строкой формата «по_горизонтали по_вертикали», возможные значения «right,center,left,bottom,center,op». at – определяет точку на элементе, относительно которого будет позиционировать элемент.
Свойство width определяет ширину виджета:
$("#menu").selectmenu({ width:500 });
Теперь давайте рассмотрим методы виджета. Методы вызываются после инициализации виджета и выглядят следующим празом:
close – если передать значение True закроет открытый выпадающий блок;
destroy – разрушает функционал виджета;
disable – отключает виджет(аналог свойства disabled);
enable – включает в работу виджет;
instance – возвращает объект виджета;
menuWidget – возвращает объект блока с контентом выпадающего списка;
open – открывает закрытый виджет;
option – позволяет считать или установить новое значение свойствам;
refresh – обновляет контент виджета. Полезный метод если Вы программно добавляете в виджет новые элементы выпадающего списка.
widget – возвращает объект виджета.
События
У данного виджета, как и у других элементов библиотеки JQuery UI есть свои определенные события. Описывая которые, мы описываем функцию, которая будет вызвана при срабатывании события.
change – срабатывает при изменении состоянии виджета;
close – срабатывает при закрытии виджета;
create – срабатывает при инициализации виджета;
focus – срабатывает при получении фокуса виджетом;
open – срабатывает при открытии выпадающего меню виджета;
select – срабатывает при выборе одного из элементов виджета.
Давайте рассмотрим более подробно событие change. При этом, напишем небольшой скрипт, который при выборе новой категории в выпадающем меню, будет отображать на главной странице сайта — статьи этой категории. Для этого добавим следующий код:
$("#menu").selectmenu({
change:function(event,ui) {
if(ui.item.value) {
$.ajax({
url:"index.php",
type:"POST",
data:"cat_id=" + ui.item.value,
dataType:"json",
success:function(html) {
if(html) {
var data = $(".main_text");
data.empty();
for(var i = 0; html.length > i; i++) {
data.append("<table class='table' width='780' border='0' cellspacing='0' cellpadding='0'> <tr> <td class='td_top'> <h5> <a href='view_text.php?id=" + html.id + "'>" + html.title + "</a> </h5> </td> </tr> <tr> <td> <p>" + html.discription+ " </p> </td> </tr> <tr> <td> </td> </tr> </table>");
}
}
}
});
}
}
});
Как Вы видите, здесь мы описываем функцию, которая будет выполнена при изменении состояния виджета. Данная функция отправляет запрос в файл index.php, используя AJAX, и передавая при этом идентификатор категории, статьи которой нужно отобразить на экране. Обратите внимание, как можно получить данные атрибута value тега option:
ui.item.value
Далее, если запрос был успешен, очищаем блок с контентом и вставляем данные в него. Хотел бы отметить, что данные приходят в формате строки JSON, которая автоматически конвертируется в объект. Это то, что касалось кода JavaScript, в файле index.php, мы добавим следующий код, который обработает переданные данные:
if($_POST['cat_id']) {
$result = get_statti($_POST['cat_id']);
echo json_encode($result);
exit();
}
Как Вы видите, если приходят данные при помощи метода POSТ – вызывается функция get_statti(), которой передается полученный идентификатор категории. При этом данная функция возвращает массив статей данной категории, далее этот массив конвертируем в JSON строку и выводим ее на экран при помощи функции echo. Но так как данный участок кода работает только при обращении через метод AJAX значит весь вывод на экран – это ответ от сервера, который попадет в переменную html нашего скрипта.
Теперь давайте перейдем в браузер и протестируем наш скрипт:
Как Вы видите все отлично работает. На этом данный урок я буду завершать. Всего Вам доброго и удачного кодирования!!!
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
