Как стать автором
Обновить

ikSelect — идеальный плагин для стилизации селектов

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

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

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

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

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

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

Чем же он лучше остальных?


Объем: 11KB

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

Мобильные браузеры


Плагин стилизирует само поле, но при нажатии вызывает родное поведение браузера. Протестировано на iOS (Safari) и Android (2.3 native, Firefox):

  

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

Выводы

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

Ссылки

Найденные баги можно оставлять в комментах, либо же на GitHub.

P.S. Спасибо за инвайт, высланный автору плагина i10k.
Теги:
Хабы:
Всего голосов 59: ↑49 и ↓10 +39
Просмотры 23K
Комментарии Комментарии 49