Иногда вам нужно заменить стандартный HTML-элемент select своим собственным.
Обычно это необходимо, если у дизайнера разыгралась фантазия и он рисует «кастомный» селект и настаивает, чтобы он был реализован так, как ему хотелось.
Что ж, надо, мы это сделаем.
Немного предыстории.
Однажды мне нужно было настроить select. Я пользуюсь mootools, поэтому сразу пошел искать плагин на замену select — а вдруг его кто-то уже написал? Действительно, я нашел несколько.
Я начал в этом разбираться.
Все просмотренные мной плагины оказались полной ерундой — они не вели себя как стандартный выбор.
Я выбросил их на помойку и решил написать свой плагин, который бы полностью повторял поведение стандартного селекта.
Давайте теперь посмотрим, как ведет себя стандартный выбор:
- Вы можете сосредоточиться на этом
- Выбрать можно не открывая select, а используя клавиши со стрелками
- Вы можете закрыть открытый выбор, нажав esc
- Вы можете выбрать опцию в открытом селекторе, нажав Enter.
- Вы можете удалить фокус с выбора, нажав Tab
- Если в селете много вариантов, то появляется прокрутка
- select имеет событие onchange (есть и другие, но это самое важное)
- В стандартном селекторе можно ввести первую букву и фокус перейдет непосредственно на элемент.
Перейдем к делу
Код того, что здесь произошло, приводить не буду — бесполезно.Лучше сделать это самому скачать и посмотри или посмотри демо .
Но я расскажу вам, что произошло.
Что случилось
Итак, у нас появился собственный «кастомный» селектор.И вот что он может сделать:
- Стандартное поведение, такое как «родной» выбор
- Заменяет указанный выбор самим собой
- Имеет целых 4 события: onChange, onSelect, onShow, onHide
- Поддерживает темы
- Имеет четкий CSS
- Имеет простую модель DOM.
- Легко использовать
- У него есть метод rebuild(), с помощью которого вы можете перестроить «пользовательский» селектор, если в собственном селекте происходят изменения.
- JS-код весит около 4 килобайт в сжатом виде и 7,5 в несжатом.
Каковы текущие проблемы?
- Вы не можете изменить тип полосы прокрутки, которая появляется в поле выбора, если имеется большое количество опций.
- На данный момент поле выбора может опускаться только вниз, но оно также должно упасть вверх, если внизу недостаточно места.
- Многократного режима нет
- Таймаут при прокрутке, чтобы опция при наведении мыши при прокрутке не подсвечивалась сразу (именно так и есть при нативном выборе)
- Не меняет внешний вид при нажатии
- Если есть прокрутка, она должна прокручиваться автоматически при выборе элементов.
- Если навести курсор мыши на пункт меню, а затем убрать мышь, то при нажатии Enter этот пункт должен быть выбран
Тестировалось только в IE 7, Firefox 3.0.1, Google Chrome (кто-нибудь смотрел, как это работает в Opera и IE6?) Если вы что-то пропустили, дайте мне знать.
И, конечно же, сообщайте о найденных ошибках, и я их исправлю.
Скачать CustomSelect Посмотреть демо Теги: #mootools #select #JavaScript #mootools
-
Что Нового В Google Analytics
19 Oct, 24 -
Javascript. Простой Наблюдатель.
19 Oct, 24
