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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Первым делом перейдем на сайт 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 – определяет точку на элементе, относительно которого будет позиционировать элемент.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Свойство 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 нашего скрипта.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

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

Смотреть

Метки: ,

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

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

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

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

  1. Цифровой

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

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