Наверно каждый верстальщик искал способ стилизации тега select, но большинство плагинов с помощью которого это можно сделать либо громоздкие, либо с недостатками, нужно было что-то просто, что можно было просто взять установить и изменить внешний вид css свойствами так как тебе нужно. Недавно верстая очередной сайт возникла необходимость изменить данный тег и в следствии чего был найден плагин Selecter. По сути плагин выполняет все те же самые функции как и обычный select, единственный небольшой недостаток так это то что у него стандартный скролл что не очень красиво, НО это легко правится плагином Scroller от того же создателя, его опишу в следующей статье, а сейчас рассмотрим плагин Selecter.

Установка

Подключаем два файла плагина *.js и *.css

1
2
<script src="jquery.fs.selecter.js"></script>
<link href="jquery.fs.selecter.css" rel="stylesheet">

Опции

callback — по умолчанию $.noop — Вызывает пользовательскую функцию после выбора элемента;
cover — по умолчанию false — Если true то выпадающий список перекрывает весь select(сафари стиль);
customClass — по умолчанию ‘ ‘ — Применяет указанный класс к объекту;
label — по умолчанию ‘ ‘ — Устанавливает метку отображаемую перед выбором;
external — по умолчанию false — Создает select с ссылками и при выборе открывает в новом окне;
links — по умолчанию false — Создает select с ссылками и при выборе открывает в текущем окне;
mobile — по умолчанию false — Создает адаптивный select для мобильных устройств;
trim — по умолчанию 0 — Описания данной опции в документации нет, да и сам пока не проверял что оно делает.

Методы

Метод defaults

1
$.selecter("defaults", opts);

opts — по умолчанию {} — Опции объекта.

Метод disable — отключает указанный элемент в списке

1
$(".target").selecter("disable", "1");

option — по умолчанию null — Список элементов которые нужно заблокировать.

Метод destroy — отключает плагин на всех или указанных объектах

1
$(".target").selecter("destroy");

Метод enable — заранее выбирает указанных элемент

1
$(".target").selecter("enable", "1");

option — по умолчанию null — Элемент который нужно выбрать.

Метод refresh — обновляет плагин на элементе

1
$(".target").selecter("refresh");

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

Возможно вас это заинтересует
comments powered by HyperComments