Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .

Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.

Не поддаются полной стилизации следующие элементы html-форм:

• раскрывающийся список ;
• флажок ;
• переключатель .
• поле для отправки файла .

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

Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.

Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).

На вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.

• При отключенном JavaScript отображаются стандартные селекты.
• Небольшой размер скрипта, примерно 4 килобайта.
• Работает в IE6+ и всех современных десктопных браузерах.
• Выводится внутристрочно.
• Легко поддается оформлению через CSS.
• Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
• Автоматически подстраивает ширину, если она не указана.
• Поддерживает прокрутку колесом мыши.
• Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
• Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
• Поддерживает атрибут «disabled».
• Работает и с динамически добавляемыми/изменяемыми селектами.

• Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
• Не поддерживает группировку элементов списка (тег ).
• Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.

Плагин недоступен, т.к. он уже не актуален.

Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012

Если на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :

Сразу после jQuery подключите файл со скриптом:

(function($) { $(function() { $("select").selectbox(); }) })(jQuery)

Этот код поместите перед тегом после вышеуказанных файлов.

При динамическом изменении селектов необходимо запустить триггер refresh , например:

(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)

Его структура выглядит следующим образом:

-- Выберите --

• -- Выберите --
• Пункт 1
• Пункт 2
• Пункт 3

Чтобы оформить селекты с помощью CSS, используйте следующие классы:

Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.

Структура будет стандартной

Чтобы в select отображаемая строка была одна используем атрибут size со значением 1.

Стилизация для нашего селекта

Получаем

Слон Бегемот Жираф

В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах . Что это за свойство читайте ниже.

Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size

Реализовать нашу задачу помогло css3 свойство appearance

Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background

Для того чтобы стилизовать select option нам потребуется JavaScript

Перед JavaScript-кодом должен быть подключен jQuery

Около года назад, я уже делал подробный обзор jQuery-плагинов для стилизации селектов . Итог остался неутешительным, у каждого из них были свои недостатки, и я так и не смог найти то, что хотел. В комментариях отписалось довольно много разработчиков, но все мы сошлись на том, что идеального плагина нет, и что над любым из них приходится хорошо поработать напильником.

Недавно на хабре проскакивал Selectik - довольно неплохой плагин, но не без недостатков . Работа над ним, судя по GitHub , ещё идёт, но пока он не очень удобен, и его основные проблемы ещё имеют место быть.

Недавно мне написал незнакомый человек, и попросил протестировать его плагин ikSelect , который он старался написать максимально приближенным к идеалу. Плагин мне настолько понравился, что после всестороннего тестирования и багфиксинга, я решил написать его обзор и поставить точку в данной теме, а также помочь толковому разработчику попасть на хабр.

В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта Mac OS X, но его без проблем можно стилизировать через css.

Вот так он выглядит в закрытом виде:

Вот так в открытом:

Достоинства:

• работает во всех браузерах (IE6+, FF, Opera, Chrome, Safari), в том числе в мобильных
• автоматически подстраивает ширину
• открывается всегда на видимую часть страницы (так называемое «умное позиционирование»), как в горизонтальном, так и в вертикальном положении
• позволяет задавать максимальную высоту выпадающего списка
• позволяет группировать опции (optgroup)
• полностью управляется с клавиатуры (в т.ч. реагирует на переход Tab"ом, PgUp, PgDown, Home, End)
• имеет подбор по первым буквам (не только по одной, но и по последующим)
• поддерживает скролл колёсиком мышки
• вставляется инлайново (inline-block)
• замечательно работает с огромными списками (1000+ элементов)
• оставляет стандартный селект при отключенном javascript
• имеет отличный API

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

В Opera mini остаются стандартные селекты, во избежание перезагрузки страницы при открытии списка. В Opera mobile работает так же, как и в настольной версии.

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .

Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.

Не поддаются полной стилизации следующие элементы html-форм:

• раскрывающийся список ;
• флажок ;
• переключатель .
• поле для отправки файла .

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

Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.

Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).

На вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.

• При отключенном JavaScript отображаются стандартные селекты.
• Небольшой размер скрипта, примерно 4 килобайта.
• Работает в IE6+ и всех современных десктопных браузерах.
• Выводится внутристрочно.
• Легко поддается оформлению через CSS.
• Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
• Автоматически подстраивает ширину, если она не указана.
• Поддерживает прокрутку колесом мыши.
• Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
• Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
• Поддерживает атрибут «disabled».
• Работает и с динамически добавляемыми/изменяемыми селектами.

• Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
• Не поддерживает группировку элементов списка (тег ).
• Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.

Плагин недоступен, т.к. он уже не актуален.

Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012

Если на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :

Сразу после jQuery подключите файл со скриптом:

(function($) { $(function() { $("select").selectbox(); }) })(jQuery)

Этот код поместите перед тегом после вышеуказанных файлов.

При динамическом изменении селектов необходимо запустить триггер refresh , например:

(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)

Его структура выглядит следующим образом:

-- Выберите --

• -- Выберите --
• Пункт 1
• Пункт 2
• Пункт 3

Чтобы оформить селекты с помощью CSS, используйте следующие классы:

Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.

В данной статье мы рассмотрим создание плагина jQuery, суть которого в замещение элемента select красиво оформленным неупорядоченным списком (ul) .

Одним из важнейших способов эффективной организации jQuery кода служит превращение его частей в плагины. Такие превращения несут в себя ряд преимуществ: код становится проще модифицировать и сопровождать, руководство повторяющими задачами упрощается. Также увеличивается скорость разработки, так как организация плагина способствует повторному использованию кода.

Поэтому мы и продемонстрируем сегодня процесс конвертирования кода в плагин. Код мы возьмем из этого руководства jQuery& CSS3 замещаем элемент select и превратим его в готовый к использованию jQuery плагин.

Написать jQuery плагин совсем не сложно. Для этого нужно расширить объект $.fn своей собственной функцией. Гораздо сложнее должным образом структурировать свой код, чтобы плагин можно было легко вставить и использовать (без зависимостей).

Вот, несколько проблем, которые нам надо решить при конвертировании кода руководства в jQuery плагин:

1. Пользователю нужно дать возможность решать, какая разметка будет генерироваться для dropdown (выпадающего списка). К примеру, код руководства сильно зависит от наличия data- атрибутов, которые содержат разметку HTML. Это слишком специфично, чтобы подключать в плагин, поэтому данную реализацию нужно исключить.

2. Из-за способа вызова плагина код нужно переписать, чтобы он использовал объект this , который передается плагину, вместо жестко заданного селектора. Это также позволяет конвертировать не один, а несколько элементов select одновременно;

3. Код JavaScript и CSS нужно поместить в разные файлы, чтобы их было проще подключать и редактировать.

Как вы помните из руководства, наш jQuery код сканирует элементы option тега select и создает неупорядоченный список. Одновременно с этим он также ищет ряд data- атрибутов в тегах option , которые содержат URL на изображение и описание для использования в элементах списка.

Это слишком специфично для плагина. Пользователям нужно дать возможность переписать эту функциональность. Для решения этой проблемы можно позволить пользователям передавать плагину функцию в качестве параметра, которая и будет генерировать разметку. Если такой параметр не передается, будем обращаться к тому, который стоит по умолчанию, и который просто берет текст элемента option и превращает его в пункт списка.

Превратим вышесказанное в код: