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

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

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

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

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

Первым делом перейдем на сайт 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

Получить

Метки: ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree