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

От автора: При создании сайтов очень часто необходимо выводить различную информацию в виде выпадающего списка, образованного при помощи тегов 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 });

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

События

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

Давайте рассмотрим более подробно событие 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 нашего скрипта.

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

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