Pull to refresh

Selectik — стильные селекты

Reading time2 min
Views13K
Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

После десятков проектов, где приходилось использовать сторонние решения, я столкнулся с постоянными изобретениями костылей, не хватки гибкости готовых плагинов, скоростью генерации.

Естественно, после всего этого я решил изобрести свой велосипед.

Пример разработан без дополнительных картинок с помощью 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'ом
Параметры, которые можно использовать:
  • назначение ширины списка (в стандартном случае высчитывается ширина оригинального списка)
  • максимальное количество видимых элементов
  • выбора типа прокрутки — стилизированный или стандартный
  • скорость анимации открытия и закрытия списка
API:
  • обновление стилизированного списка
  • открытие/закрытие списка
  • назначение нового активного элемента
  • динамическое изменение ширины
  • включение/выключение списка

В будущем

  • поддержка мобильных устройств
  • ваши пожелания в комментариях
Проект на GitHub. Демо-страница с песочницей здесь.
Буду благодарен, если ошибки/проблемы вы сможете описать в issue.

update
Как зметил Connor требуется версия jQuery 1.7+ из-за использования .on(). Вероятнее всего будет заменено на .bind().

update 2
Всем спасибо за замечания и баги. В течении недели будет сделано.
Tags:
Hubs:
Total votes 52: ↑49 and ↓3+46
Comments74

Articles