nSelect - custom select jQuery plugin

Описание

nSelect - это простой плагин для кастоматизации выпадающего списка. Отличие от других подобных плагинов состоит в том, что он не перегружен лишним функционалом. Размер минифицированной версии составляет всего около 3 кб.

Основные возможности:

Простота в установке
Возможность вызова коллбэков
Простая кастомизация тем
Работает в формах
Поддержка скролла для длинных списков (нужен дополнительный плагин)

Версия плагина 1.0.1

Ссылка на гитхаб: https://github.com/edbond88/nselect

Установка

Для начала нужно скачать архив с плагином, из папки build взять файлы jquery.nselect.min.js, jquery.nselect.css и подключить к вашему проекту.

Если вы используете SASS, то рекомендую брать файл jquery.nselect.sassиз папки src

HTML

Файл со стилями подключается в head тэг:

<link rel="stylesheet" href="jquery.nselect.css">

Сам плагин подключаем перед закрытием тэга body. Для плагина нужна библиотека jQuery > 1.6.0.

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

CSS

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

Установка с помощью bower

bower nselect

Инициализация

Для инициализации нужно вызвать плагин для нужного нам селекта:

<select class="nselect-1" name="pets">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Frog</option>
    <option value="4">Duck</option>
    <option value="5">Elephant</option>
</select>

$('.nselect-1').nSelect();

Конфигурация

Настраивать плагин можно с помощью следующих опций, которые передаются в виде объекта, как параметр в функцию.

Пример: $(selector).nSelect({ option: value });

Name: default	Description
`firstTitle: ''`	Если задано, то будет отображаться как заголовок в списке. Более подробно ниже
`theme: 'nsOrange'`	Класс темы, который добавляется к обертке
`topList: false`	Если `true`, то список выводится сверху. Добавляется класс `_top`
`disabled: false`	Если `true`, то список становится некликабельным. Добавляется класс `_disabled`
`hideAfterSelect: false`	Если `true`, то при выборе элемента, он будет исчезать из списка. Добавляется класс `_hide`
`scrollbarTheme: 'dark'`	Тема для кастомного скроллбара, если он используется
`afterChange: function() {}`	Коллбэк, вызывается при выборе пункта в списке
`afterOpen: function() {}`	Коллбэк, вызывается при открытии списка

Также формируются два события: nOpen и nChange, после открытия и выбора пункта списка, соответственно.

Заголовок на кнопке, которая открывает список может быть задан следующим образом:

Установкой атрибута selected у option в селекте
Установкой атрибута data-title в селекте
Через передачу параметра firstTitle в плагин

Приоритет такой: 1 > 2 > 3

Если заголовок не был задан ни одним из предыдущих способов, то берется первый элемент в селекте.

Примеры:

Заголовок задан через data-title

<select class="nselect-1" name="pets" data-title="Chose your pet">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Duck</option>
</select>

$('.nselect-1').nSelect();

Заголовок задан через firstTitle в опциях плагина

<select class="nselect-1-2" name="pets">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Duck</option>
</select>

$('.nselect-1-2').nSelect({
    firstTitle : 'Chose your pet with javascript'
});

Кастомный скроллбар для длинных списков

В nSelect можно использовать кастомный скроллбар

Для этого нужно либо скачать файлы с официального сайта, либо вытащить из папки build файлы jquery.mCustomScrollbar.min.js, jquery.mCustomScrollbar.css и подключить в проект.

Дополнительные примеры

Селект, который нельзя раскрыть. Добавляем класс _disabled.
Либо через js в опциях ствим disabled: true.

<select class="nselect-2 _disabled" name="disabled">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Frog</option>
    <option value="4">Duck</option>
    <option value="5">Elephant</option>
</select>

Или:

$('.nselect-2').nSelect({
    disabled : true
});

Список выпадает вверх:

<select class="nselect-3" name="pets">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Frog</option>
    <option value="4">Duck</option>
    <option value="5" selected>Elephant</option>
</select>

$('.nselect-3').nSelect({
    topList : true
});

Событие при открытии и выборе пункта:

<select class="nselect-4" name="pets">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Frog</option>
    <option value="4">Duck</option>
    <option value="5">Elephant</option>
</select>

$('.nselect-4').nSelect({
    afterOpen : function(el){
        alert('Селект открылся')
    },
    afterChange : function(el){
        alert('Пункт выбран')
    }
});

Опция hideAfterSelect = true:

<select class="nselect-5" name="pets">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Frog</option>
    <option value="4">Duck</option>
    <option value="5">Elephant</option>
</select>

$('.nselect-5').nSelect({
    hideAfterSelect : true
});

Требования и поддержка

Для работы плагина нужна библиотека jQuery версии выше 1.6

Поддержка браузерами:

Chrome & Mobile Chrome
Firefox
Opera
Internet Explorer > 8
Safari & Mobile Safari

По вопросам работы плагина пишите на гитхабе.

Сайт разработчика: http://edbond.name/