От автора: При создании сайтов очень часто необходимо выводить различную информацию в виде выпадающего списка, образованного при помощи тегов select. Поэтому в данном уроке мы с Вами рассмотрим виджет Selectmenu библиотеки JQuery UI, при помощи которого очень быстро и легко можно изменить стандартный вид выпадающих списков.
Установка библиотек
Для сегодняшнего урока мы будем использовать следующий сайт.
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курсВ шапке данного сайта есть выпадающий список из категорий. Его вид мы и будем менять в данном уроке.
Первым делом перейдем на сайт http://jquery.com и скачаем библиотеку jquery. Затем переходим на официальный сайт http://jqueryui.com библиотеки JQuery UI, далее на вкладку Download и скачиваем данную библиотеку.
По необходимости можно сгенерировать собственную цветовую схему для данной библиотеки, перейдя по ссылке design a custom theme. Далее подключаем скачанные библиотеки:
| 1 2 3 | <script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/script1.js"></script> |
Файл script.js — это пустой файл, в котором мы будем писать скрипты на языке JavaScript. Также необходимо подключить стили библиотеки JQuery UI:
| 1 | <link rel="stylesheet" href="css/jquery-ui.css"/> |
Работа с виджетом Selectmenu
Выпадающий список категорий содержится в блоке с идентификатором menu, поэтому при помощи библиотеки jQuery выбираем данный блок и вызываем метод selectmenu.
| 1 | $("#menu").selectmenu(); |
Теперь давайте перейдем в браузер и посмотрим, как изменился внешний вид выпадающего списка:
Как вы видите выпадающий список выглядит как обычное меню. Теперь давайте рассмотрим настройки данного виджета. В качестве настроек мы обращаемся к соответствующим свойствам виджета и устанавливаем определенные их значения. Обращение к свойствам осуществляется следующим образом:
| 1 | $("#menu").selectmenu({ appendTo:".header",}); |
appendTo в данное свойство мы можем передать селектор блока в котором будут располагаться временные элементы виджета.
disabled — если в данное свойство передать значение True, то виджет будет отключен и выбрать одно из его значений будет не возможно.
Свойство icons предоставляет возможность задать класс для отображения кнопки виджета (правое небольшое изображение показывающее, что меню выпадающее):
| 1 | $("#menu").selectmenu({ icons:{ button:"ui-icon-circle-minus" } }); |
На экране мы увидим следующее:
Для позиционирования выпадающего блока применяется свойство position:
| 1 2 3 4 5 6 | $("#menu").selectmenu({ position: { my:"left+10 top", at:"left top+20" }, }); |
Свойству position устанавливаем значением объект со следующими свойствами: my — свойство определяет точку на позиционируемом элементе, относительно которой будет происходить выравнивание. Задается строкой формата «по_горизонтали по_вертикали», возможные значения «right,center,left,bottom,center,op». at – определяет точку на элементе, относительно которого будет позиционировать элемент.
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курсСвойство width определяет ширину виджета:
| 1 | $("#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. При этом, напишем небольшой скрипт, который при выборе новой категории в выпадающем меню, будет отображать на главной странице сайта — статьи этой категории. Для этого добавим следующий код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $("#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[i].id + "'>" + html[i].title + "</a> </h5> </td> </tr> <tr> <td> <p>" + html[i].discription+ " </p> </td> </tr> <tr> <td> </td> </tr> </table>"); } } } }); } } }); |
Как Вы видите, здесь мы описываем функцию, которая будет выполнена при изменении состояния виджета. Данная функция отправляет запрос в файл index.php, используя AJAX, и передавая при этом идентификатор категории, статьи которой нужно отобразить на экране. Обратите внимание, как можно получить данные атрибута value тега option:
| 1 | ui.item.value |
Далее, если запрос был успешен, очищаем блок с контентом и вставляем данные в него. Хотел бы отметить, что данные приходят в формате строки JSON, которая автоматически конвертируется в объект. Это то, что касалось кода JavaScript, в файле index.php, мы добавим следующий код, который обработает переданные данные:
| 1 2 3 4 5 | if($_POST['cat_id']) { $result = get_statti($_POST['cat_id']); echo json_encode($result); exit(); } |
Как Вы видите, если приходят данные при помощи метода POSТ – вызывается функция get_statti(), которой передается полученный идентификатор категории. При этом данная функция возвращает массив статей данной категории, далее этот массив конвертируем в JSON строку и выводим ее на экран при помощи функции echo. Но так как данный участок кода работает только при обращении через метод AJAX значит весь вывод на экран – это ответ от сервера, который попадет в переменную html нашего скрипта.
Теперь давайте перейдем в браузер и протестируем наш скрипт:
Как Вы видите все отлично работает. На этом данный урок я буду завершать. Всего Вам доброго и удачного кодирования!!!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Кое-как добился плавного выпадания такого селекта… жуть.