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

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

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

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

В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта 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 ^[5] только повторяет поведение стандартных селектов, и не добавляет новых функций, которые умеют некоторые другие плагины ^[1]
• несмотря на мелкие недостатки, данный плагин является лучшим из тех, которые я пока видел

Ссылки

• страничка плагина ^[5]
• GitHub ^[6]
• архив с актуальной версией ^[7]

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

P.S. Инвайт автору плагина Igor10k можно выслать на "mail(четырёхлапое лающее животное)i10k.ru".

Автор: flight