Красивый select и multiselect с помощью Chosen
05.05.2012
Где взять?
Скачать его совершенно бесплатно можно на githab. Там же есть и довольно большой пример использования Chosen.
В примере рассмотрен как обычный, так и мультиселект, с использованием различных параметров плагина.
А сейчас нас сейчас интересует то, как подключить плагин к нашей странице.
Подключаем
А делается это легко.
После скачивания zip архива, распакуем его и из всей небольшой кучки файлов нам понадобится только папка chosen. В ней всего 6 файлов, нам будут нужны только следующие:
- chosen.css
- chosen.jquery.min.js
- chosen-sprite.png
Остальные можно спокойно удалить, зачем нам лишние файлы, правда?
Но это ещё не всё, для работы плагина необходим jQuery, если в вашем проекте он ещё не используется, то пора его подключать.
Первым делом необходимо указать путь до стилевого файла chosen.css.
А в конце нашей страницы необходимо подключить jquery.js и chosen.jquery.min.js, а так же "включить" плагин.
//Подключаем jQuery
//Подключаем chosen.jquery.min.js
//Включаем плагин
Всё, Chosen подключен.
Применяем
Для того, что бы обычный select:
превратился в красивый и более функциональный вариант, который вы можете посмотреть вот тут,
необходимо применить к select класс chzn-select, и для данного примера у нас получится следующий код:
Для реализации множественного выбора, ничего нового изобретать не нужно, за это отвечает всё тот же параметр multiple.
Что бы при множественном выборе пользователю было понятно что делать, можно установить текст по умолчанию:
data-placeholder='Тут какой то текст'
Прописывать это надо всё в том же select.
На этом всё, для тех кому хочется побольше узнать об этом плагине прошу вас на официальную страничку на GitHub, которая была указана выше.
P.S. Стоит отметить, что плагин постоянно обновляется, так что если вы решили использовать его в своих проектах - обновляйтесь, не забывайте.