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

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

Время на прочтение 1 мин
Количество просмотров 19K
На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин 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
Теги:
Хабы:
+51
Комментарии 61
Комментарии Комментарии 61

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн