Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам. После десятков проектов, где приходилось использовать сторонние решения, я столкнулся с постоянными изобретениями костылей, не хватки гибкости готовых плагинов, скоростью генерации.
Естественно, после всего этого я решил изобрести свой велосипед.
Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.
Опять велосипед?
Достаточно долго я дописывал, создавал костыли при использовании готовых плагинов. Последней каплей стал тот факт, что тестеры при написании Unit-тестов пытаются достучаться, в первую очередь, до стандартного селекта, но это не выходит, так как большинство плагинов, которые я использовал скрывают стандартный селект через «display=none».
Также я хотел иметь легкое решение, быструю генерацию (в IE при большом количестве селектов на странице), работающие точно также как и оригинальный селект.
Плагины, которые я использовал чаще всего отталкивались от событий связанных с уже созданной структурой стилизированного селекта. В случае Selectik'a, события в основном повешены именно на оригинальный селект.
Библиотекой было решено использовать jQuery, по двум причинам:
- Сейчас большинство создаваемых сайтов используют именно эту библиотеку.
- На нативном JavaScript'е создание заняло бы намного больше времени и количество кода зашкаливало.
И так, что же из себя представляет Selectik?
В minify-версии вес файла скрипта всего 5,2 Кб. А с дополнительным плагином (скролл колеса мыши) и CSS в демо-примере 12,8 Кб. GZIP 2,1 Кб/4,7 Кб соответственно.
Поддерживаемые браузеры: IE7+, последние версии Chrome, Safari, Firefox.
Возможности, которые на данный момент реализованы:
- управление клавишами вверх/вниз и Enter
- стилизированная прокрутка
- скролл колесом мыши
- поиск элементов по буквам
- автоматически подстраивает ширину
- «умное позиционирование»
- реагирует на переход Tab'ом
- назначение ширины списка (в стандартном случае высчитывается ширина оригинального списка)
- максимальное количество видимых элементов
- выбора типа прокрутки — стилизированный или стандартный
- скорость анимации открытия и закрытия списка
- обновление стилизированного списка
- открытие/закрытие списка
- назначение нового активного элемента
- динамическое изменение ширины
- включение/выключение списка
В будущем
- поддержка мобильных устройств
- ваши пожелания в комментариях
Буду благодарен, если ошибки/проблемы вы сможете описать в issue.
update
Как зметил Connor требуется версия jQuery 1.7+ из-за использования .on(). Вероятнее всего будет заменено на .bind().
update 2
Всем спасибо за замечания и баги. В течении недели будет сделано.
