jQuery CoreUISelect — плагин для стилизации селекта

в 8:48, , рубрики: javascript, jquery, select, Веб-разработка, метки: ,

На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.

jQuery CoreUISelect — плагин для стилизации селекта

Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокоплит и самое главное полная кастомизация, включая скроллбар*.

* Для поддержки кастомного скролла нужен плагин jScrollPane

Спустя несколько дней, получился вполне работоспособный плагин, гордо названный jQueryCoreUISelect

Есть API, совсем небольшой состоящий из 5 коллбеков:

$('.b-core-ui-select__select').сoreUISelect({
    onInit : addCoreUISelectListener,
    onOpen : addCoreUISelectListener,
    onClose : addCoreUISelectListener,
    onChange : addCoreUISelectListener,
    onDestroy : addCoreUISelectListener
});
 
function addCoreUISelectListener(select, event){
    console.log(el, event);
}  

И пара внешних методов (для полноценной жизни вполне хватает):

$('.b-core-ui-select__select').сoreUISelect('update');
$('.b-core-ui-select__select').сoreUISelect('destroy');

Под iPhone, iPad, Android включается адаптация, т.е. внешний вид выпадающего dropdown уже зависит от системы. В Opera Mini плагин выключается полностью.

jQuery CoreUISelect — плагин для стилизации селекта
Под iPad

jQuery CoreUISelect — плагин для стилизации селекта
Под iPhone

Демо и исходники см. ниже, форкаем, ругаем, предлагаем.
Спасибо за внимание!

Ссылка на демо
Ссылка на GitHub

Автор: shaggysmile

* - обязательные к заполнению поля