nSelect - jQuery custom select plugin

Download

Описание

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

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

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

  1. Установкой атрибута selected у option в селекте
  2. Установкой атрибута data-title в селекте
  3. Через передачу параметра 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 и подключить в проект.

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

<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('Пункт выбран')
    }
});

<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

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

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

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