Rocketman

Сильный и быстрый плагин для стилизации селектов

Плагин (ранние версии) был полноcтью переделан. Изменилась суть. Rocketman — это самостоятельная версия. Далее преимущества и недостатки, что умеет, а что появится в обновлениях.

  • полная кроссбраузерность, действительно быстрая кастомизация и колбэк-функция;
  • идентичное стандартному select поведение, в том числе:
    • самонастраивающаяся ширина;
    • поддержка optgroup;
    • поддержка событий onchange;
    • обход tabindex;
    • посимвольный поиск с клавиатуры, обход клавишами, выбор по ENTER, отмена и закрытие по ESC;
    • стандартная для каждого браузера прокрутка, клики и т.п.
  • умное позиционирование с возможностью отключения для увеличения быстродействия;
  • добавлено динамическое обновление select;
  • плюс то, что у всех, а-ля не влияет на select при отключенном JavaScript и пр.

В будущем — динамическое управление для option.

на ночей

Описание и принцип работы

Для начала рассмотрим самый простой вариант — без умного позиционирования. Чтобы понять, как работает плагин, как и на что заменится исходный код.

Список заменится на следующую конструкцию:

Рассмотрим одновременно и работу плагина, и его настройки — они тесно связаны.

Обертка "outside shadow or borders"

<div class="outside shadow or borders"> является оберткой выпадающей части списка. По умолчанию его класс — только отражение смысла,— можно изменить в настройках следующим образом:

Получим <div class="my-class-for-combo-box">

Class и id по умолчанию

По умолчанию всем спискам присваивается класс select, а вложенный в обертку контейнер <div class="container"> может перекликаться стилями с основной версткой. Чтобы этого избежать, достаточно задать им собственный префикс:

Конструкция станет такой:

Также можно задать и собственный класс! Он будет заимствован из исходного списка.

Если не задан собственный идентификатор, то по умолчанию будут присвоены следующие значения:

При этом нумерация будет сквозной.

Умное позиционирование

Умное позиционирование строится на том, что выпадающая часть выносится в body:

При этом связи между частями списка становятся сложнее:

Класс списка становится идентификатором его выпадающей части — помним, что только один список бывает раскрыт.

Типизация списков

Используя классы и префиксы можно создавать типы списков, в том числе с разным позиционированием:

Инициализация и настройка

Как обычно, подключаем библиотеки и выносим стили:

Инициализируем плагин:

Остановимся подробнее на настройках.

Arrows

Тут все просто. Определяет отображение полоса прокрутки со стрелками (по умолчанию они выводятся). Если нужно их спрятать, задаем false. Заметим, что полоса прокрутки формально останется в конструкции (участвует в прокрутке колесиком мыши), но мешать не будет.

Сanvas

Определяет собственный класс для выпадающей части списка.

1 — На примере без умного позиционирования.

Output

Задает количество одновременно отображаемых «оптионов». По умолчанию — 12.

Prefix

По умолчанию всем спискам присваевается класс select. Задает префикс, что может быть полезно для создания разных типов списков. Отметим, что он влияет на класс контейнера с «оптионами».

2 — на примере с умным позиционированием.

Method

Задает два параметра: 1-й — как выводить выпадающую часть, 2-й — нужно ли сохранить первоначальную конструкцию <select>. По умолчанию ([true, false]) список имеет умное позиционирование (для этого выпадающая часть выносится в <body>) и конструкция <select> заменяется на <input type="hidden" />.

С первым все ясно — нужна скорость, внешняя конструкция без overflow и нет списков на «дне» — лучший выбор [false, ...]. Второй [..., true] спасает в случае, когда нет возможности отсылать на сервер ничего кроме как через <select> — например, при подключении модулей сторонних производителей.

Приведем идентичные варианты:

Колбэк-функция

Если просто, то при загрузки DOM после отрисовки каждого списка плагин возвращает а-ля «я отрисован и готов», а также свое значение value. А после каждого изменения (когда меняется значение value) список возвращает «я изменился».

Первая переменая $select — объект jQuery, содержащий в себе список, а $select.value — его значение. console.log($select) покажет все внутренности объекта.

Вторая переменая status — состояние списка. После отрисовки («я отрисован и готов») статус принимает значение true, а при изменении — false.

Важно помнить, что колбэк-функция вынесена в корень скрипта.

Динамическое обновление списков

Отрисованные списки можно при необходимости обновить (перерисовать). Это удобно, если нужно изменить первоначальные настройки {} (вывести большее число «оптионов» в выпадающую часть и др.), или если по какой-либо причине изменился первоначальный список, и его нужно отрисовать заново.

В любом из случаев список будет инициализирован заново.

Было:

3 — на примере с умным позиционированием.

Стало:

Настройка дизайна

Рассмотрим примеры, приведенные на этой странице. Инициализируем списки:

Для простоты начнем cо второго.

Стандартный тип

Зададим стили для внешней части списка:

Зададим стили для открытого списка, стили при наведении, а также стили для заблокированного списка:

Контейнеры с «оптионами»

Зададим стили для контейнера с «оптионами»:

Учтем умное позиционирование:

«Оптионы»

Зададим стили для «оптионов»:

Сгруппированные «оптионы»

Зададим стили для сгруппированных «оптионов»:

Полоса прокрутки и стрелки

Зададим стили для полосы прокрутки:

Зададим стили для стрелок:

Свой тип списка

Венемся к инициализации:

Рассмотрим числовые списки:

Зададим стили для внешней части списка:

Зададим стили для контейнера с «оптионами»:

Зададим стили для «оптионов»:

Вот так.

на ночей