jQuery selectBox: настраиваемая замена для элементов SELECT

Лицензия MIT: http://opensource.org/licenses/MIT

Особенности

• Поддерживает OPTGROUPS.
• Поддерживает стандартные элементы управления раскрывающимся списком.
• Поддерживает элементы управления множественным выбором (например, multiple="multiple").
• Поддерживает встроенные элементы управления (например, size="5").
• Полностью доступен с клавиатуры.
• Shift + клик (или shift + enter) для выбора диапазона опций в элементах управления множественным выбором.
• Поиск по типу при фокусировке элемента управления.
• Автоматическая высота на основе атрибута размера (чтобы использовать, опустите свойство высоты в вашем CSS!).
• Протестировано в IE7-IE9, Firefox 3-4, последних браузерах WebKit и Opera.

Использование

Скачайте последнюю версию: https://github.com/marcj/jquery-selectBox/releases.

Добавьте ссылку на файл JS:

<script src="jquery.selectbox.js" type="text/javascript"></script>

Добавьте файл CSS (или добавьте содержимое в свою таблицу стилей):

<link href="jquery.selectbox.css" rel="stylesheet" type="text/css" />

Чтобы инициализировать:

// default
$('select').selectBox();

// или с пользовательскими настройками
$('select').selectBox({
    mobile: true,
    menuSpeed: 'fast'
});

Настройки

Для указания настроек после инициализации используйте этот синтаксис:

$('select').selectBox('settings', {settingName: value, ... });

Методы

Чтобы вызвать метод, используйте следующий синтаксис:

$('select').selectBox('methodName', [option]);

Доступные методы

API SelectBox

Вы можете создать экземпляр selectBox также классическим ООП способом:

var selectBox = new SelectBox($('#mySelectBox'), settings = {});
selectBox.showMenu();

Публичные методы:

refresh()
destroy()
disable()
enable()

getLabelClass()
getLabelText()
getSelectElement()
getOptions(String type = 'inline'|'dropdown')

hideMenus()
showMenu()

setLabel()
setOptions(Object options)
setValue(String value)

removeHover(HTMLElement li)
addHover(HTMLElement li)

disableSelection(HTMLElement selector)
generateOptions(jQuery self, jQuery options)
handleKeyDown(event)
handleKeyPress(event)
init(options)
keepOptionInView(jQuery li, Boolean center)
refresh()
removeHover(HTMLElement li)
selectOption(HTMLElement li, event)

События

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

$('select').selectBox().change(function () {
    alert($(this).val());
});

Доступные события

Известные проблемы

• Обратные вызовы blur и focus не очень надёжны в IE7. Обратные вызовы change работают нормально.

Авторство

Оригинальный плагин Кори ЛаВиски из A Beautiful Site, LLC. (http://www.abeautifulsite.net/)