Компания
24,58
рейтинг
16 марта 2011 в 21:04

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

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

Не секрет, что стандартные селекты имеют крайне слабый уровень стилизации средствами 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)
Автор: @flight
Айкен
рейтинг 24,58
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (69)

  • +1
    Habrahabr атакован Приват Банком?
    • 0
      Жаль голосование отключили, вот бы их всех на главную)
  • 0
    Еще и комментарии уходят в другие топики. Простите.
  • +1
    Табличку бы. Иначе не удобно сравнивать.
    • 0
      Все плагины довольно специфичны. В одну табличку не собрать нормально. Или она будет очень большой =)
      • 0
        Плагины в колонках; достоинства/недостатки в строках. Да пускай она получится длинной. Тогда большую часть текста можно будет удалить.
  • +5
    Вы считаете что веб 2.0 это стилизированные селекты?
    • 0
      Да, вы правы. Убрал данный тэг.
  • +3
    > «Не работает в IE6», «Баги в IE6»

    Это действительно серьёзные недостатки :)
    • +1
      Да, есть ещё люди, которым приходится бороться с данным браузером. В основном это корпоративная среда.
      • 0
        Я уже не верстаю под данный браузер, но стараюсь, чтобы сайт оставался в нём юзабельным. Т.е. оптимально, чтобы плагин просто оставлял стандартные селекты. Хоть это и можно сделать через условие в jquery, но лучше, чтобы это было вшито в плагин.
  • +1
    cuSel ещё есть.
  • 0
    Лучше оставить стандартные :/
    Единственную не кривую реализацию таких вещей видел в smartjs и extjs.
  • +3
    Eще 1 гибрид Autocomplete + Combobox.
    JQuery UI: jqueryui.com/demos/autocomplete/#combobox
  • 0
    а как же jqTransform и Uniform?
  • +3
    Потратил тут кучу времени в поисках адекватного combobox'a. Увы, не существует.
    Условно лучший — code.google.com/p/sexy-combo/
    Но его надо ровнять напильником.

    Некоторые другие комбобоксообразные (по разным причинам невозможно использовать — криво выглядят, глючат, не достаёт элементарной функциональности и пр.):

    jqueryui.com/demos/autocomplete/#combobox
    ufd.googlecode.com/svn/trunk/examples/index.html
    simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox
    www.fairwaytech.com/flexbox/flexbox-demos.aspx
    www.emposha.com/javascript/fcbkcomplete.html
    devthought.com/projects/mootools/textboxlist/
    iantearle.com/books/facelist-help
    wayofspark.com/projects/smarttextbox/

    Если вдуматься — 21-й век на дворе, и ни одного человеческого комбобокса
    • 0
      >Условно лучший — code.google.com/p/sexy-combo/

      Можно скриншот в действии, нет возможности поглядеть
      • 0
        Вот демка:
        www.7strategybck.com/Backup/Nicolas/docs/exchange-territory/sexy-combo/examples/index.html

        Выглядит он как совершенно обычный нормальный комбобокс. Там проблемы начинаются когда хочешь ему что-нибудь изменить. Типа ширины или поведения. Опции там толком не работают, приходится лезть внутрь и разбираться.
        • 0
          А н̶а̶ф̶и̶г̶а̶ зачем он тогда такой нужен?

          Смотрю, в большинстве плагинов даже клавиши не работают.
          Посмотри пожалуйста мою ссылку пониже, мнение с хабра интересует (в личку)
        • 0
          Спасибо за пожалуй лучший комбобокс!
  • +1
    Пиарю свой недоделанный монстрообразный SelectList плагин -))
    jquerycomboboxtmpl.codeplex.com/

    У него возможностей по стилизации на порядок больше
    • 0
      Не нашёл где там демку посмотреть
      • 0
        У меня в этом месяце отключили хостинг за неуплату, демку я удалил.
        Хочу менять хочтера, пока не определился где.
        Там демка есть в архиве) HTML файлик)
    • 0
      без демки нет возможности оценить ваш перспективный плагин (
  • 0
    Недавно тоже написал селект, но немного специфический — с возможностью добавления новых опций. Если интересно: http://www.std42.ru/jquery-multiselect/
  • +1
    Про Niceforms забыли. Там модифицируется не только select, но и остальные элементы форм — радиобаттоны, кнопки, инпуты.
  • +1
    И не один из этих селектов со скроллом не работает на мобильных устройствах.
    • 0
      jQuery Mobile в помощь.
    • +2
      Я это написал в посте. Лично я считаю, что на мобильниках должны быть стандартные селекты, т.к. на том же айфоне их реализация заслуживает похвалы.
      • 0
        Я лично придумал такую реализацию: loki.timon.com.ua/select2/
        Внешне — кастомный, а работает как нативный.
  • +1
    Еще в копилку.
  • +2
    А вы правда считаете, что то, что стандартные селекты «выглядят во всех браузерах по разному» — это недостаток?

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

    А вы его на свои рельсы тянете. Зачем?
    • 0
      Прочитайте первое предложение данного обзора и первый пункт вывода. Я совсем не против стандартных селектов. Но в некоторые дизайны они не вписываются. Я описываю инструменты, а применять их или нет — уже ваше дело.
      • 0
        Ну что вы, я прочитал и то и другое, и не один раз. Мне просто интересно ваше мнение насчет стилизации селектов. Судя по тому, что вы об этом пишете и хорошо знаете вопрос, вы регулярно применяете этот инструмент. Например такой вопрос — будь ваша воля, вы бы применяли стилизацию селектов?
        • 0
          Как верстальщик — нет. Лишние проблемы и затраченное время.
          Но дизайнеров тоже можно понять в данном вопросе.
        • –3
          Лично я считаю, что да, формы стилизировать надо обязательно. И меня, например, выбешивает, что кроме ишака никто не реализовал стилизацию скроллбаров.
          Если «стилизация не нужна», то зачем тогда вообще css? Зачем возможность стилизировать button`ы, ссылки, таблицы? Что за странная избирательность? Кнопки и ссылки — стилизируются и пользователь переживет, если они будут не такие, как он установил по-умолчанию, а вот селекты и скроллбары — нет? Непоследовательность и нелогичность.
  • 0
    Стесняюсь спросить: а почему обзор плагинов публикуется в блоге компании? — разве вы их писали?
  • 0
    Как вариант jQuery UI – Spinner, jQuery UI –menu (jQuery UI 1.9 Milestone 3)
  • 0
    Использую Uni-Form (не путать с Uniform). Есть интеграция с Django и некоторыми другими полезными инструментами.
  • +4
    По-моему, стилизация селекта вообще не нужна. Юзер привык к системным селектам, заходит на сайт и сразу понимает где селект. Стилизация нужна была тем, кто не знал как лечить селект поверх всплывающих блоков с position:absolute в ie6. А лечилось достаточно просто: пустой прозрачный iframe под всплывающим блоком и селект исчезал.
    • 0
      Я тоже придерживаюсь такой точки зрения: стилизация элементов форм в большинстве случаев только мешает пользователям.
      Скоро покажу свой вариант комбобокса, который выглядит стандартно.
  • +5
    Ребят, а оно вам правда надо?
    • +1
      да, надо
  • +2
    Я тоже раньше баловался, заменял формочки, а сейчас браузеры вполне достойно и красиво все отрисовывают, меняю элементы только при крайней необходимости (вроде промо-проектов).
  • 0
    А ещё есть jstyling
  • 0
  • +2
    Каких только люди причин не придумают, только бы не заниматься стилизацией селектов.
    • 0
      А вы спросите разработчиков браузеров, почему они не добавили в браузеры такой возможности.
      • 0
        Аргумент кончено сильный. но не бесспорный.
        Почему поля ввода дизанировать в таком случае можно? Да причем до состояния когда пользователь вообще не сможет его найти?

        Почему их не сделали такими же неизменными как и селекты? Ну чтобы пользователь привык и не путался?
  • 0
    Dropdown Check List — довольно популярный.
    code.google.com/p/dropdown-check-list/
  • 0
    Вы с первой строчкой про то, что
    Каждый верстальщик хотя бы раз ругался с дизайнером по поводу нестандартных элементов форм...
    … очень оптимистично сказали :)

    Я, например, всегда ругаюсь с дизайнером по поводу элементов форм. К сожалению, за свою достаточно большую по длительности карьеру я почти ни разу не увидел где это действительно было бы нужно, а вот то, что дизайнер просто-напросто хотел выделиться — достаточно часто. Еще чаще встречались дизайнеры, которые никогда не видели, как select, button или даже поле выбора файла выглядят, например в MacOS или Ubuntu… В любом случае, подобные костыли не ведут себя, как привычные элементы интерфейса, что пользователя на самом деле только отталкивает.

    Речь не идет о нестандартных контролах, множесттво годных примеров которых есть, например на yuilibrary.com/
  • 0
    Спасибо за обзор.

    Отсутствие мультиселекта я бы не относил в недостатки — от лукавого это.
  • 0
    cuSel — довольно неплохой плагин, активно развивается. Нет умного позиционирования, проблемы с навигацией клавиатурой, нет поддержки optgroup (посоветовал Shuichi)

    Все хорошо пока не попробуете разместить селект под селектом. Мне пришлось решать проблему напильником… Стилизация под свои нужды не очевидна. Опять же напильник поработал.

  • 0
    JQuery Selectable.
    Вы написали в достоинствах: «работает с отключенным js».

    Это каким образом?
    • 0
      Я имел ввиду то, что при отключении js, селект заменяется на стандартный, вместо того, чтобы развалиться и не работать совсем.
      • 0
        Спасибо, это действительно ценно и выгодно отличает данный плагин от всех прочих. По сути — минималистичная надстройка над SELECT.
        • 0
          Большинство приведённых здесь плагинов работает так-же. Просто в этом плагине я зачем-то написал, что он работает при отключённом js'е =).
  • 0
    Chosen забыли
    • 0
      Теме уже год. + chosen не поддерживает IE7 и не полностью поддерживает IE8.
      • +1
        Что с того, что теме уже год? Мне лично вот сегодня она оказалась очень актуальной) Кстати, по случаю, большое вам за нее спасибо, а особенно за selectBox.

        Да, я в курсе недостатков chosen, именно поэтому искал другие, и нашел вашу статью. Тем не менее, в статье вы не обходили решения с недостатками. А упомянутое решение думаю заслуживает внимания. Впрочем, дело ваше, я не настаиваю.
        • 0
          Не за что =). Крайне советую почитать мою новую тему, сейчас уже практически все баги плагина исправлены. Думаю, что он вам понравится.
          • 0
            Спасибо, добавил в закладки
  • 0
    Может кому мой понравится: github.com/meliborn/jQuery-reselect-plugin
    image
  • 0
    «При отключённых скриптах превращается в тыкву — абсолютно бесполезен».

    Можно автора попросить исправить, ошибки в своих высказываниях, насчет отключенных js, вводит в заблуждение?
    • 0
      Теме уже 2 года =)
      А вообще зайдите на сайт данного селектбокса при отключённом яваскрипте, вы не увидите стандартный селект, будет просто пусто на его месте.
      • 0
        Да, тема старая, но нельзя же сказать, что ее не читают.
        Я не только про это место, вообще про все упоминания в статье с работой js, как будто другие плагины работают без js — вводит в заблуждение.
        • 0
          Да, они вполне работают без js. Без дизайна, но всё-таки работают. Они оставляют старые проверенные селекты, что очень правильно. Их можно отключить для мобильников, к примеру, где все эти понты не нужны.
          • 0
            Я читал ваши комменты — мне это понятно, я подумал, что будет вернее переформулировать, для остальных. Это лишь мое мнение, как хотите).

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

Самое читаемое Разное