Иногда бывает нужно заменить стандартный HTML элемент select своим.
Обычно это необходимо, если фантазия дизайнера разыгралась и он нарисовал «кастомизированный» select и настаивает, чтобы было реализовано как он того захотел. Ну что ж, надо — сделаем.
Однажды мне было необходимо кастомизировать select. Я использую mootools, поэтому, сразу пошел искать плагинчик для замены select'a — вдруг кто-то уже написал? Действительно, нашел несколько. Стал разбираться. Все просмотренные мною плагины оказались полной ерундой — они вели себя не как стандартный select. Выкинул их в помойку и решил написать свой плагин, который бы полностью повторял поведение стандартного select'a.
Давайте теперь посмотрим, как же ведет себя стандартный select:
Я не буду здесь приводить код того, что получилось — это ни к чему. Лучше сами скачайте и посмотрите, либо загляните в демо. Но я расскажу о том, что получилось.
Итак, получился свой «кастомный» селектбокс. И вот что он умеет:
Все эти проблемы я постараюсь исправить в следующих релизах.
Тестировалось только в IE 7, Firefox 3.0.1, Google Chrome (гляньте кто-нибудь, в Опере и IE6 как?)
Если что-то упустил из виду — сообщайте. И, конечно, сообщайте о найденных багах, буду исправлять.
Скачать CustomSelect
Посмотреть демо
Обычно это необходимо, если фантазия дизайнера разыгралась и он нарисовал «кастомизированный» 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 в несжатом
Какие на данный момент есть проблемы
- Нельзя изменить вид полосы прокрутки которая появляется в селектбоксе при большом количестве опций
- Пока что селектбокс может выпадать только вниз, а должен выпадать и вверх, если внизу мало места
- Отсутствует режим multiple
- Таймаут при покрутке, чтобы опция при наведении мыши при прокрутке выделялась не сразу (у нативного select'a именно так)
- Не меняет внешний вид при нажатии
- Если есть скролл, то он должен автоматически прокручиваться при выборе элементов.
- Если мышкой навсти на пункт меню, затем убрать мышь, то при нажатии Enter должен выбраться этот элемент
Все эти проблемы я постараюсь исправить в следующих релизах.
Тестировалось только в IE 7, Firefox 3.0.1, Google Chrome (гляньте кто-нибудь, в Опере и IE6 как?)
Если что-то упустил из виду — сообщайте. И, конечно, сообщайте о найденных багах, буду исправлять.
Скачать CustomSelect
Посмотреть демо