jQuery-плагин для стилизации селектов
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина.
Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.
Не поддаются полной стилизации следующие элементы html-форм:
- раскрывающийся список <select> ;
- флажок <input type="checkbox"> ;
- переключатель <input type="radio"> .
- поле для отправки файла <input type="file"> .
Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.
Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.
Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).
Демонстрация работы плагина
На отдельной странице вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.
Достоинства
- При отключенном JavaScript отображаются стандартные селекты.
- Небольшой размер скрипта, примерно 4 килобайта.
- Работает в IE6+ и всех современных десктопных браузерах.
- Выводится внутристрочно.
- Легко поддается оформлению через CSS.
- Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height ).
- Автоматически подстраивает ширину, если она не указана.
- Поддерживает прокрутку колесом мыши.
- Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
- Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
- Поддерживает атрибут «disabled».
- Работает и с динамически добавляемыми/изменяемыми селектами.
Недостатки
- Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
- Не поддерживает группировку элементов списка (тег <optgroup> ).
- Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.
Скачать
Плагин недоступен, т.к. он уже не актуален.
jQuery-плагин «SelectBox Styler»Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012
Обновления
Подключение плагина
Если на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом </head> :
Сразу после jQuery подключите файл со скриптом:
Далее задействуйте плагин:
Этот код поместите перед тегом </head> после вышеуказанных файлов.
При динамическом изменении селектов необходимо запустить триггер refresh , например:
HTML-код после выполнения плагина
Его структура выглядит следующим образом:
CSS-классы, используемые для оформления селекта
Чтобы оформить селекты с помощью CSS, используйте следующие классы:
.selectbox родительский контейнер для всего селекта .selectbox .select селект в свернутом состоянии .selectbox.focused .select фокус на селекте, когда нажата клавиша Tab .selectbox .select .text вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей» .selectbox .trigger правая часть свернутого селекта (условный переключатель) .selectbox .trigger .arrow вложенный тег для переключателя (стрелка) .selectbox .dropdown обертка для выпадающего списка .selectbox .dropdown ul выпадающий список .selectbox li пункт (опция) селекта .selectbox li.selected выбранный пункт селекта .selectbox li.disabled отключенный (недоступный для выбора) пункт селектаЗаключение
Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.
В ближайших постах планирую поделиться аналогичными скриптами для <input type="checkbox"> и <input type="radio"> .
Смотрите также
- jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select) 2614 комментариев
- jQuery-плагин для стилизации input[type=»radio»] 38 комментариев
- jQuery-плагин для стилизации input[type=»checkbox»] 35 комментариев
- Цифровые часы на чистом CSS и jQuery 41 комментарий
Комментарии (105)
Недостатоток огараничение ширины у выпадающего списка, то есть если select 100px то и выпадающий список тоже 100px, и значение option будет записываться больше одной строке!
Привет. не работает. Он все равно активен. Подскажи в чем дело. спасибо.
у вас проблема со скриптом. Если значение value у option не совпадает с текстом в нём, то что глюк в скрипте?
я сделал так. При генерации списка ddlist добавил значение option в id li А при клике: