16 318 Скрипты / Form

JQuery nice select — заменяем стандартный select


Легкий jQuery плагин, который заменяет стандартный select на кастомизированный dropdown.

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

Подключить jQuery и плагин:
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.nice-select.js"></script>
Подключить скомпилированный стиль плагина:
<link rel="stylesheet" href="path/to/nice-select.css">
в идеале, импортировать SASS исходники (если вы используете SASS) в ваш главный стилевой файл для более удобной кастомизации плагина.
@import 'nice-select';
В заключении инициализировать плагин.
$(document).ready(function() {
  $('select').niceSelect();
});

Некоторые возможности

Вы можете указать альтернативный текст для каждого option, который будет отображаться в выпадающем списке при выборе этого option.
Добавьте атрибут data-display, чтобы задать этот альтернативный текст.
Например:
<select>
  <option data-display="Выберите опцию">Ничего</option>
  <option value="1">Какая-то опция</option>
  <option value="2">Другая опция</option>
  <option value="3" disabled>Опция disabled</option>
  <option value="4">Еще опция</option>
</select>
Каждый класс, который вы назначаете элементу select, будет скопирован в сгенерированный выпадающий список. Таким образом, вы можете настраивать различные версии оформления, просто добавляя новый CSS.
Некоторые примеры оформления включены в CSS плагина: wide, right, small.
Классы которые отвечают за размер и расположение нового select.

Методы

update
Обновляет кастомный dropdown, чтобы отразить любые изменения сделанные в оригинальном select.
$('select').niceSelect('update');

destroy
Удаляет кастомный dropdown и открепляет все обработчики событий.
$('select').niceSelect('destroy');
Скачать 765Загрузок 53,24 Kb
Демо

Комментарии

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

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