9 144 Скрипты / Form

Selectric - пользовательский select

Быстрый, простой и легкий jquery плагин позволяющий оформить html тег select в том стиле, который пришел на ум вашему дизайнеру.

На мой скромный взгляд, на сегодняшний день один из тех плагинов, которые можно подключать в каждый проект.

Поддерживаются браузеры:

  • Firefox
  • Chrome
  • Safari
  • Internet Explorer 7+
  • Opera

CSS

Подключите css файл со стилями:

Измените стили на свой вкус, или воспользуйтесь уже готовыми темами.

JS

Подключаем jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Подключаем плагин:

<script src="js/jquery.selectric.min.js"></script>

Инициализируем:

$(function(){
    $('select').selectric();
});

Опции

Плагин можно вызывать с несколькими опциями, например так:

$('select').selectric({
    maxHeight: 200
});

onOpen - function() {} - тип Function - функция вызываемая, когда опции селекта открыты
onchange - function() {} - тип Function - функция вызываемая после изменения опции
onClose - function() {} - тип Function - функция вызываемая, когда опция селекта закрыта
maxHeight - 300 - тип Integer - максимальная высота контейнера с опциями которая может быть
keySearchTimeout - 500 - тип Integer - После этого времени без нажатия клавиши, строка поиска сбрасывается
arrowButtonMarkup - <b class="button">&#9662;</b> - тип String [HTML] - Разметка для кнопки опции
disableOnMobile - true - тип Boolean - инициализация плагина в мобильных браузерах
margin - 5 - тип Integer - минимальное расстояние между открытыит опциями и окном
border - 1 - тип Integer - толщина границы контейнера с опциями
openOnHover - false - тип Boolean - при наведении (по умолчанию - клик мыши)
expandToItemText - false - тип Boolean - развернуть контейнер с опциями за оболочкой
responsive - false - тип Boolean - элементы станут адаптивными
customClass - {
prefix: 'selectric',
postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive',
camelCase: true
} - тип Object - пользовательские классы

Публичные методы

  • $('select').selectric('refresh'); // перестроить плагин
  • $('select').selectric('destroy'); // уничтожить select и вернуться к нормальному состоянию
  • $('select').selectric('open');    // открыть опции
  • $('select').selectric('close');   // закрыть опции

Для скачки мы прикрепили версию 1.6.4 с дефолтным стилем, но свежую версию всегда можно найти на сайте плагина, там же можно выбрать любую другую тему оформления и даже воспользоваться мини онлайн генератором тем для формирования своего CSS файла стилей.

Скачать 846Загрузок 51,42 Kb
Демо

Комментарии

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

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