6 722 Скрипты / Form

Cusel - изменяем внешний вид select


Cusel отличный плагин для изменения внешнего вида формы select. Работает на jQuery, но последняя поддерживаемая версия 1.6.2. Обновлений плагина пока не выходило.

Возможности такие:

  • легкость интеграции
  • кроссбраузерность
  • быстрая скорость работы
  • максимальная приближенность к работе обычного select:
  •     на сервер передается значение (value выбранного option)
  •     по клику на option выпавший список скрывается
  •     по клику вне select выпавший список скрывается
  •     в выпадающем списке показ полностью длинных значений option
  •     учет атрибута disabled
  •     учет атрибута selected
  •     если явно не указан selected, select принимает значение первого в списке option
  •     учет события onchange
  •     скроллинг выпадающего списка прокручивается колесом мыши
  •     возможность получения фокуса (update 31.07.10)
  •     участие в tab обходе (update 31.07.10)
  •     смена значения select стрелками вверх/вниз (update 31.07.10) — после выбора нужного значения требуется нажатие enter
  •     смена значения select по нажатию клавиш букв (update 31.07.10)
  •     подсветка select при наведении и получении фокуса (update 31.07.10)
  •     закрытие списка по Esc (update 3.08.10)
  • при отключенном jаvascript остаются обычные select
  • удобное динамическое обновление option
  • простота динамического добавления select
  • дополнительные приятные возможности:
  •     подсветка в выпадающем списке выбранного значения
  •     подсветка в выпадающем списке значения при наведении
  •     возможность ручного управления видом скроллинга выпадающего списка
  •     возможность оформления option с помощью CSS
  •     возможность вставки тегов в option
  •     плавное обрезание невмещающегося текста

Поддерживаются следующие виды браузеров: ie6 и выше, firefox 4 и выше, opera 9.5 и выше, safari 5 и выше, chrome 4 и выше.

HTML

Пример из Демо с множеством различных вариантов селектора:

CSS

CSS стили для Демо:

А это стили самого плагина cusel:

JS

Подключаем все необходимые скрипты: jquery библиотеку, на данный момент, не старше версии 1.6.2, плагин cusel, плагин jScrollPane, для реализации прокрутки внутри селектов, и плагин mousewheel, для возможности прокрутки с помощью колесика мыши.
Далее идет инициализация плагина, в данном случае приведен пример из Демо:

Функции

  • cuSel - производит замену обычных select на стилизованные. Меняет только те, которые указаны в параметре changedEl.
  • cuSelRefresh - производит обновление селекта. Необходимо при изменении количества option в select и при показе скрытого select. Обновляет селекты, указанные в параметре refreshEl.

Параметры

  • changedEl - указываем селекторы (за основу взяты базовые селекторы CSS1) , к которым будет применен cuSel. Можно указать элемент (тег), класс, id. Обязательный параметр. Используется только в функции cuSel.
  • visRows -  количество видимых строк выпадающего списка. Если в списке элементов будет больше заданного числа, у списка появится вертикальная прокрутка. Если число не задано, все значения списка будут видимы.
  • scrollArrows - отражать или нет стрелочки в блоке с прокруткой. Возможные значения: true/false (по умолчанию false)
  • refreshEl - id селектов через запятую, которые требуется обновить. Параметр обязателен. Используется только в функции cuSelRefresh.

Более полное описание плагина, а также ответы на часто задаваемые вопросы можете найти на странице плагина.
В демо используется версия Cusel 2.5

Скачать 1602Загрузок 21,45 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи