От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем о виджете Selectmenu, который позволяет стилизовать и украсить списки select на странице.
Как вы знаете, некоторые элементы форм достаточно неудобны в стилизации, проще говоря, средствами CSS их сложно привести к некоему нестандартному оформлению, при этом чтобы все выглядело красиво и кроссбраузерно.
К числу таких элементов относится, в частности, список select. Для стилизации таких элементов часто прибегают к услугам JavaScript и плагинам jQuery. Библиотека jQuery UI также предлагает свое решение для оформления списков select — это плагин Selectmenu.
Итак, у нас есть стандартный выпадающий список select:
1 2 3 4 5 6 7 |
<select id="select"> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> <option>Item 4</option> <option>Item 5</option> </select> |
Который выглядит также вполне стандартно.
А теперь используем одноименный метод плагина — selectmenu — и посмотрим на разницу в отображении, которую мы получим добавлением всего одной строки кода:
1 2 3 |
$(function(){ $("#select").selectmenu(); }); |
Если вы хотите понять, как плагину удалось стилизовать выпадающий список, тогда можете заглянуть в консоль браузера, где увидите, что список select на самом деле скрывается, а вместо него создается список ul, который можно замечательно стилизовать по вашему усмотрению.
Как видите, все достаточно просто. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!