Виджет Selectmenu библиотеки jQuery UI — красиво оформляем теги select

Виджет Selectmenu библиотеки jQuery UI - красиво оформляем теги select

От автора: При создании сайтов очень часто необходимо выводить различную информацию в виде выпадающего списка, образованного при помощи тегов select. Поэтому в данном уроке мы с Вами рассмотрим виджет Selectmenu библиотеки JQuery UI, при помощи которого очень быстро и легко можно изменить стандартный вид выпадающих списков.

скачать исходникискачать урок

Установка библиотек

Для сегодняшнего урока мы будем использовать следующий сайт.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

В шапке данного сайта есть выпадающий список из категорий. Его вид мы и будем менять в данном уроке.

Первым делом перейдем на сайт http://jquery.com и скачаем библиотеку jquery. Затем переходим на официальный сайт http://jqueryui.com библиотеки JQuery UI, далее на вкладку Download и скачиваем данную библиотеку.

По необходимости можно сгенерировать собственную цветовую схему для данной библиотеки, перейдя по ссылке design a custom theme. Далее подключаем скачанные библиотеки:

Файл script.js — это пустой файл, в котором мы будем писать скрипты на языке JavaScript. Также необходимо подключить стили библиотеки JQuery UI:

Работа с виджетом Selectmenu

Выпадающий список категорий содержится в блоке с идентификатором menu, поэтому при помощи библиотеки jQuery выбираем данный блок и вызываем метод selectmenu.

Теперь давайте перейдем в браузер и посмотрим, как изменился внешний вид выпадающего списка:

Как вы видите выпадающий список выглядит как обычное меню. Теперь давайте рассмотрим настройки данного виджета. В качестве настроек мы обращаемся к соответствующим свойствам виджета и устанавливаем определенные их значения. Обращение к свойствам осуществляется следующим образом:

appendTo в данное свойство мы можем передать селектор блока в котором будут располагаться временные элементы виджета.

disabled — если в данное свойство передать значение True, то виджет будет отключен и выбрать одно из его значений будет не возможно.

Свойство icons предоставляет возможность задать класс для отображения кнопки виджета (правое небольшое изображение показывающее, что меню выпадающее):

На экране мы увидим следующее:

Для позиционирования выпадающего блока применяется свойство position:

Свойству position устанавливаем значением объект со следующими свойствами: my — свойство определяет точку на позиционируемом элементе, относительно которой будет происходить выравнивание. Задается строкой формата «по_горизонтали по_вертикали», возможные значения «right,center,left,bottom,center,op». at – определяет точку на элементе, относительно которого будет позиционировать элемент.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Свойство width определяет ширину виджета:

Теперь давайте рассмотрим методы виджета. Методы вызываются после инициализации виджета и выглядят следующим празом:

close – если передать значение True закроет открытый выпадающий блок;

destroy – разрушает функционал виджета;

disable – отключает виджет(аналог свойства disabled);

enable – включает в работу виджет;

instance – возвращает объект виджета;

menuWidget – возвращает объект блока с контентом выпадающего списка;

open – открывает закрытый виджет;

option – позволяет считать или установить новое значение свойствам;

refresh – обновляет контент виджета. Полезный метод если Вы программно добавляете в виджет новые элементы выпадающего списка.

widget – возвращает объект виджета.

События

У данного виджета, как и у других элементов библиотеки JQuery UI есть свои определенные события. Описывая которые, мы описываем функцию, которая будет вызвана при срабатывании события.

change – срабатывает при изменении состоянии виджета;

close – срабатывает при закрытии виджета;

create – срабатывает при инициализации виджета;

focus – срабатывает при получении фокуса виджетом;

open – срабатывает при открытии выпадающего меню виджета;

select – срабатывает при выборе одного из элементов виджета.

Давайте рассмотрим более подробно событие change. При этом, напишем небольшой скрипт, который при выборе новой категории в выпадающем меню, будет отображать на главной странице сайта — статьи этой категории. Для этого добавим следующий код:

Как Вы видите, здесь мы описываем функцию, которая будет выполнена при изменении состояния виджета. Данная функция отправляет запрос в файл index.php, используя AJAX, и передавая при этом идентификатор категории, статьи которой нужно отобразить на экране. Обратите внимание, как можно получить данные атрибута value тега option:

Далее, если запрос был успешен, очищаем блок с контентом и вставляем данные в него. Хотел бы отметить, что данные приходят в формате строки JSON, которая автоматически конвертируется в объект. Это то, что касалось кода JavaScript, в файле index.php, мы добавим следующий код, который обработает переданные данные:

Как Вы видите, если приходят данные при помощи метода POSТ – вызывается функция get_statti(), которой передается полученный идентификатор категории. При этом данная функция возвращает массив статей данной категории, далее этот массив конвертируем в JSON строку и выводим ее на экран при помощи функции echo. Но так как данный участок кода работает только при обращении через метод AJAX значит весь вывод на экран – это ответ от сервера, который попадет в переменную html нашего скрипта.

Теперь давайте перейдем в браузер и протестируем наш скрипт:

Как Вы видите все отлично работает. На этом данный урок я буду завершать. Всего Вам доброго и удачного кодирования!!!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Цифровой

    Кое-как добился плавного выпадания такого селекта… жуть.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree