Данная версия сайта является архивом и не обновляется. Новая версия находится по адресу kalnytskyi.com.
[ English ]

listbox.js

listbox.js screenshot

Listbox.js — это простой jQuery-плагин, предоставляющий альтернативу стандартному html-тегу <select>. Основная проблема стандартной (браузерной) реализации тега <select> заключается в том, что нельзя изменить его внешний вид при помощи CSS.

Listbox.js предлагает альтернативу. Он работает поверх существующего тега <select>, заменяя браузерную реализацию, реализацией основанной на <div> верстке, что позволяет гибко настроить его внешний вид при помощи CSS.

В дополнение ко всему, данный компонент предоставляет строку поиска, которая позволяет облегчить выбор нужного элемента в большом списке.

Исходный код доступен на GitHub

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

Подключите файлы плагина:

<!-- jQuery должен быть уже подключен -->
<link href="styles/jquery.listbox.css" rel="stylesheet">
<script src="js/jquery.listbox.js"></script>

Вызовите метод listbox() у нужных <select> тегов.

<script>
  $(function() {
    $('select').listbox({
      'class':        'myOwnClass',   // класс, который будет добавлен
      'searchbar':    true,           // отображать строку поиска
      'multiselect':  false           // не использовать множественный выбор
    })
  })
</script>

Настройка стилей

Для настройки внешнего вида, необходимо использовать следующие CSS-классы.

/* <div>: контейнер компонента */
.lbjs {}

/* <div>: контейнер для списка */
.lbjs-list {}

/* <div>: элемент списка */
.lbjs-item {}

/* <div>: disabled элемент списка */
.lbjs-item[disabled] {}

/* <input>: строка поиска */
.lbjs-searchbar {}