24 July 2012

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

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

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



Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка 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 плагин выключается полностью.


Под iPad


Под iPhone

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

Ссылка на демо
Ссылка на GitHub
Tags: jquery select
Hubs: Website development JavaScript jQuery
+51
18.6k 417
Comments 61
Ads