Pull to refresh

Замена стандартного select с использованием Mootools

Reading time 2 min
Views 4.1K
Иногда бывает нужно заменить стандартный HTML элемент select своим.
Обычно это необходимо, если фантазия дизайнера разыгралась и он нарисовал «кастомизированный» select и настаивает, чтобы было реализовано как он того захотел. Ну что ж, надо — сделаем.

Небольшая предыстория.

Однажды мне было необходимо кастомизировать select. Я использую mootools, поэтому, сразу пошел искать плагинчик для замены select'a — вдруг кто-то уже написал? Действительно, нашел несколько. Стал разбираться. Все просмотренные мною плагины оказались полной ерундой — они вели себя не как стандартный select. Выкинул их в помойку и решил написать свой плагин, который бы полностью повторял поведение стандартного select'a.

Давайте теперь посмотрим, как же ведет себя стандартный select:
  • На него можно навести фокус
  • Можно выбирать, не открывая select, а используя клавиши-стрелки
  • Можно закрыть открытый select, нажав esc
  • Можно выбрать опцию в открытом селекте, нажав enter
  • Можно убрать фокус с select'a, нажав tab
  • Если в select'e много опций, то появляется прокрутка
  • У select'a есть событие onchange (есть и другие, но это наиболее важное)
  • В стандартном селекте можно набирать первую букву и будет переходить фокус сразу на элемент

Ближе к делу


Я не буду здесь приводить код того, что получилось — это ни к чему. Лучше сами скачайте и посмотрите, либо загляните в демо. Но я расскажу о том, что получилось.

Что получилось


Итак, получился свой «кастомный» селектбокс. И вот что он умеет:
  • Стандартное поведение как у «нативного» select
  • Заменяет указанный select собой
  • У него есть аж 4 события: onChange, onSelect, onShow, onHide
  • Поддерживает темы
  • Имеет понятный CSS
  • Имеет простую DOM модель
  • Прост в использовании
  • Имеет метод rebuild(), при помощи которого можно перестроить «кастомный» селектбокс, если произошли изменения в нативном select'е
  • JS код весит около 4-х килобайт в сжатом виде и 7,5 в несжатом

Какие на данный момент есть проблемы


  1. Нельзя изменить вид полосы прокрутки которая появляется в селектбоксе при большом количестве опций
  2. Пока что селектбокс может выпадать только вниз, а должен выпадать и вверх, если внизу мало места
  3. Отсутствует режим multiple
  4. Таймаут при покрутке, чтобы опция при наведении мыши при прокрутке выделялась не сразу (у нативного select'a именно так)
  5. Не меняет внешний вид при нажатии
  6. Если есть скролл, то он должен автоматически прокручиваться при выборе элементов.
  7. Если мышкой навсти на пункт меню, затем убрать мышь, то при нажатии Enter должен выбраться этот элемент

Все эти проблемы я постараюсь исправить в следующих релизах.

Тестировалось только в IE 7, Firefox 3.0.1, Google Chrome (гляньте кто-нибудь, в Опере и IE6 как?)

Если что-то упустил из виду — сообщайте. И, конечно, сообщайте о найденных багах, буду исправлять.

Скачать CustomSelect
Посмотреть демо
Tags:
Hubs:
+42
Comments 76
Comments Comments 76

Articles