Возможно вас это заинтересует

Наверно каждый верстальщик искал способ стилизации тега 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