16 March 2011

Обзор jQuery-плагинов для стилизации селектов

Айкен corporate blog
Каждый верстальщик хотя бы раз ругался с дизайнером по поводу нестандартных элементов форм. Но раз уж разработчики придумали решения для нестандартных селектов, то давайте рассмотрим их и разложим все по полочкам.

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

Плагинов для замены селектов действительно довольно много, однако все же хочется рассмотреть их поближе. В этой статье я хотел бы осветить особенности каждого из плагинов. Их количество действительно огромно, так что обзор не претендует на полноту (но самые основные плагины я разберу). Начём, пожалуй, с самого простого селекта.

Стандартный select



Достоинства:
  • работает на всех устройствах, в том числе на мобильных телефонах
  • автоматически подстраивает ширину
  • без проблем контролируется с помощью jQuery
  • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)
  • сам определяет оптимальную высоту для выпадающего списка
  • позволяет группировать опции
  • позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)
  • реагирует на переход Tab'ом
  • имеет подбор по первой букве
  • поддерживает скролл колёсиком мышки
Недостатки:
  • выглядят во всех браузерах по разному
  • не имеет возможности быть нормально стилизованным

Select Box Factory 2


Select Box Factory 2
Действительно большой плагин с кучей опций.
Объем: 29KB
Доп функции: (у данного плагина их очень много, приведу основные)
  • автокомплит
  • поддерживает мультиселект
  • поддерживает любую стилизацию любого поля (включая картинки внутри пунктов)
Требования:
  • jQuery 1.2.6+ (на jQuery 1.5.1 тоже работает)
Достоинства:
  • можно настроить как душе угодно
Недостатки:
  • при отключённых скриптах превращается в тыкву абсолютно бесполезен
  • не подменяет селекты, а создает свою структуру div'ами
  • сложно установливать и настраивать
  • не имеет «умного» позиционирования
  • имеет мультиселект (но на маках вместо того чтобы зажимать cmd, приходится жать shift)
  • не реагирует на Tab

jQuery Searchable DropDown Plugin


jQuery Searchable DropDown Plugin
Гибрид select'а и autocomplete'а. Основан на стандартном селекте, то есть имеет практически все его достоинства и недостатки.
Объем: 12KB
Доп функции:
  • автокомплит
Требования:
  • jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)
Достоинства:
  • имеет все достоинства страндартного селекта
  • работает с отключенным js
  • прост и понятен в настройке
Недостатки:
  • В IE6 автокомплит не работает так, как надо, хотя сам селект остается юзабельным.

jQuery Custom Select Box


jQuery Custom Select Box
Специфический плагин, его лучше посмотреть на примере. Не скрывает выбранные пункты, оставляя их видимыми.
Объем: 8KB
Доп функции:
  • Можно настроить высоту, ширину, скролл, скорость и эффект открывания
Требования:
  • jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)
Достоинства:
  • очень прост в установке
  • довольно легок
  • имеет мультиселект
Недостатки:
  • нужен оборачивающий div
  • не работает в IE6 (расползается по всей странице)

jQuery custom selectbox


jQuery custom selectbox
Простой и лёгкий плагин, имеющий, к сожалению, некоторые недостатки.
Объем: 3KB
Доп функции:
  • отключение плагина
Требования:
  • jQuery 1.2+ (на jQuery 1.5.1 тоже работает)
Достоинства:
  • имеет маленький объем
  • прост в установке
  • умеет плавно разворачиваться
Недостатки:
  • открывается только при клике на стрелочку
  • не умеет группировать опции
  • отсутствует возможность выделения сразу несколько пунктов
  • не знает переключения стрелочками на клавиатуре
  • не умеет задавать высоту выпадающего списка
  • отсутствует «умное позиционирование»
  • нажатие на Tab не знает
  • не поддерживает IE6 (хотя совсем небольшая доработка CSS решает эту проблему)

jQuery Selectbox plugin


jQuery Selectbox plugin
Простая подмена селекта. Плагин бесполезен из-за недостатков.
Объем: 8KB
Доп функции:
  • Реализованы стандартные функции обычных селектов
Требования:
  • jQuery 1.4+ (на jQuery 1.5.1 тоже работает)
Достоинства:
  • прост в установке
  • имеет кастомные эффекты появления
Недостатки:
  • не работает в IE6 и IE7
  • если селект откажется внизу страницы, то вообще ничего не выпадет

jQuery SelectBox Plugin


jQuery SelectBox Plugin
Практически идеальный плагин.
Объем: 16KB
Доп функции:
  • Реализованы стандартные функции обычных селектовов
Требования:
  • jQuery 1.4.4+ (на jQuery 1.5.1 тоже работает)
Достоинства:
  • очень прост в установке
  • действительно кроссбраузернен
  • предлагает очень классное описание плагина и «песочницу»
  • обладает мультиселектом
  • имеет подгруппы
  • можно отключать опции
  • автоподстраивает ширину
  • реагирует на Tab
  • реагирует на стрелки клавиатуры и скролл
Недостатки:
  • небольшие баги в IE6
  • нет умного позиционирования

jquery.sb.js Selectbox Replacement


jquery.sb.js Selectbox Replacement
Похож на предыдущий, и по некоторым параметрам даже превосходит его.
Объем: 20KB (вместе с дополнительными скриптами)
Доп функции:
  • Реализованы стандартные функции обычных селектовов
  • Можно через alt вставлять любую разметку внутрь опций (втом числе картинки)
Требования:
  • jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)
  • jquery.ba-throttle-debounce.min.js
  • jquery.tie.js
Достоинства:
  • очень прост в установке
  • есть мультиселект
  • есть подгруппы
  • можно отключать опции
  • автоподстраивает ширину
  • реагирует на Tab
  • реагирует на стрелки клавиатуры
  • реагирует на скролл
Недостатки:
  • не работает в IE6, просто оставляет стандартные
  • не знает «умного позиционирования»
  • тяжело пользоваться без стандартного описания

Плагины, которые на текущем этапе своего развития не достойны нашего внимания:

Выводы

  • Перед тем, как вы решите воспользоваться стилизированными селектами, обязательно оцените, точно ли вам это нужно.
  • Обязательно протестируйте работу селектов при отключенном js. Это сэкономит вам кучу нервов, особенно если где-то в другом месте будет ошибка, и селекты не подгрузятся.
  • Обязательно отключите всю эту красоту для мобильных бразеров, так как в них это выглядит уже не так красиво. Например у iPhone'ов очень удобно продуманы селекты. Для того, чтобы выбрать нужный пункт вовсе необязательно бесить пользователя зумом и прочими извращениями.
  • Если вы всё-таки решитесь использовать стилизированные селекты на мобильниках, учтите — большинство из них не понимает overflow:scroll, то есть пользователь просто не увидет пунктов меню, к которым нужно скроллить (если плагин не выводит стандартный выпадающий список). Все остальные селекты на мобильниках годятся только для коротких списков, которым точно не потребуется скролл.
  • Многие плагины используют float:left (в отличии от стандратных, которые можно вставить inline'ово). Конечно, любой плагин можно допилить для того, чтобы он вставлялся инлайново, но это потребует времени.
Я считаю минусом плагина то, что он не работает в IE6, однако для многих это не принципиально. Лично я из двух плагинов, одинаковых по функциональности, я в любом случаю выберу кроссбраузерный.
Объемы плагинов указаны только для их js-части (причём сжатой).


Данный обзор является пробой пера. Надеюсь, он будет полезен хабрасообществу. Приветствуются замечания и дополнения.

upd
Плагины, которые посоветовали хабраюзеры:
  • cuSel — довольно неплохой плагин, активно развивается. Нет умного позиционирования, проблемы с навигацией клавиатурой, нет поддержки optgroup (посоветовал Shuichi)
  • Sexy Combo — действительно крутой плагин, даже умное позиционирование есть, но очень медленный, судя по отзывам. Очень плохо реагирует на списки, в которых больше 100 элементов. Разработка остановлена (но есть форк, который, судя по всему, развивается) (посоветовал frog, в его комментарии целая куча различных плагинов для стилизации селектов)
Комбайны, которые заменяют все элементы форм:
  • Uniform — заменяет даже поля загрузки файлов, имеет несколько подключаемых тем, но имеет и недостатки. (посоветовал skipfish)
  • jqTransform — про него уже писали на хабре. Судя по комментариям, имеет очень много багов. (посоветовал skipfish)
  • Niceforms — красивый плагин, но не работает навигация стрелочками, нет умного позиционирования, не поддерживает ie6, последняя версия от 2008 года. (посоветовал Defite)
Tags:jqueryjquery selectselectbox
Hubs: Айкен corporate blog
+74
129.4k 442
Comments 69
Ads