Библиотека jQuery UI. Виджет Selectmenu

Библиотека jQuery UI. Виджет Selectmenu

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем о виджете Selectmenu, который позволяет стилизовать и украсить списки select на странице.

Как вы знаете, некоторые элементы форм достаточно неудобны в стилизации, проще говоря, средствами CSS их сложно привести к некоему нестандартному оформлению, при этом чтобы все выглядело красиво и кроссбраузерно.

К числу таких элементов относится, в частности, список select. Для стилизации таких элементов часто прибегают к услугам JavaScript и плагинам jQuery. Библиотека jQuery UI также предлагает свое решение для оформления списков select — это плагин Selectmenu.

Итак, у нас есть стандартный выпадающий список select:

<select id="select">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
	<option>Item 4</option>
	<option>Item 5</option>
</select>

Который выглядит также вполне стандартно.

Библиотека jQuery UI. Виджет Selectmenu

А теперь используем одноименный метод плагина — selectmenu — и посмотрим на разницу в отображении, которую мы получим добавлением всего одной строки кода:

$(function(){
	$("#select").selectmenu();
});

Библиотека jQuery UI. Виджет Selectmenu

Если вы хотите понять, как плагину удалось стилизовать выпадающий список, тогда можете заглянуть в консоль браузера, где увидите, что список select на самом деле скрывается, а вместо него создается список ul, который можно замечательно стилизовать по вашему усмотрению.

Как видите, все достаточно просто. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

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

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

Комментарии 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