Стилизация select на jQuery

Не так давно, мы с вами разбирали, как можно изменить внешний вид тега select с помощью обычного CSS. Но как показала практика, с помощью CSS можно лишь частично поменять его вид, если же вам требуется тотальное изменение дизайна тега select, то тут стоит применять jQuery, по другому никак.

На jQuery написана куча плагинов, реализующих данную задумку, но мы с вами остановимся на одном из них, это плагин jQuery Selecter.

Почему я выбрал именно его?

Во-первых, он весит очень мало (всего 10КБ).

Во-вторых, с его помощью, можно легко кастомизировать тег select и при этом, он будет хорошо работать с его атрибутами, такими как selected или disabled.

В-третьих, он кроссбраузерный.

Как использовать?

Об этом я записал видеоурок, здесь мы разбираем, как подключить плагин и учимся управлять основными его опциями.

Также прикладываю, краткую текстовую инструкцию, по подключению плагина:

1. Для начала скачайте архив с данным плагином из дополнительных материалов или на сайте Github.

2. Найдите в архиве 2 необходимых файла (это jquery.fs.selecter.min.js и jquery.fs.selecter.css) и подключите их к вашей странице. Разумеется библиотека jQuery, также должна быть подключена к странице.

Помимо файлов скрипта, к странице необходимо подключить еще скрипт modernizr.js. Он нужен, чтобы в дальнейшем нам было проще работать с таблицей стилей jquery.fs.selecter.css, ведь многие правила, находящиеся в ней, используют классы, которые как раз-таки задает modernizr.

modernizr.js вы можете взять из дополнительных материалов или скачать на официальном сайте.

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.fs.selecter.min.js"></script>
<script src="js/modernizr.js"></script>
<link rel="stylesheet" href="css/jquery.fs.selecter.css" />

3. После того, как вы все подключили, можно делать инициализацию плагина.

$(document).ready(function(){
	$("select").selecter();
});

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

Опции jQuery Selecter

О том, как работать с этими опциями, я записал отдельный урок, который располагается ниже.

Название Тип Значение по умолчанию Описание
callback Функция $.noop Запускает пользовательскую функцию при изменение значения select.
cover Логический false Меняет внешний вид тега таким образом, что элементы выпадающего списка будут перекрывать сам select.
customClass Строка '' Задает пользовательский класс.
label Строка '' Устанавливает текст, который будет написан на теге select по умолчанию.
external Логический false Создает выпадающий список, элементами которого будут являться ссылки. При клике по элементу списка, ссылка будет открыта в новом окне.
links Логический false Аналогичен предыдущему параметру, только ссылки будут открываться в текущем окне.
mobile Логический false Задает внешний вид select для мобильных устройств.

Пример, использования параметров

Задаем текст по умолчанию.

$(document).ready(function(){
	$("select").selecter({
        label: 'Какой-то текст'
    });
});

Если требуется задать несколько параметров, то просто указываем их через запятую.

$(document).ready(function(){
	$("select").selecter({
        label: 'Какой-то текст',
        cover: true
    });
});

Методы jQuery Selecter

Помимо параметров, плагин jQuery Selecter, обладает и своими методами.

Метод defaults

Задает параметры плагина по умолчанию.

$.selecter("defaults", opts);

opts - это объект, значение по умолчанию {}

Метод disable

Запрещает выбирать любой элемент в выпадающем списке или же сам тег select полностью. Под "запрещает выбирать" понимается действие, которое возникает при задание атрибута disabled в HTML.

Пример. Запрещаем выбирать первый элемент выпадающего списка у тега select с классом target:

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

Пример. Полностью блокируем тег select с классом target:

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

Метод enable

Полностью противоположный метод, т.е. отменяет действие, заданное методом disable.

Пример. Полностью разблокируем тег select с классом target:

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

Метод destroy

Отменяет действие плагина, т.е. оставляет стандартный тег select в исходном виде.

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

Метод update

Делает обновление плагина для select с классом target.

$(".target").selecter("update");

Как изменить дизайн по умолчанию?

Если вы заметили, при инициализации плагина, дизайн наших тегов select изменился, но что делать если вас не устраивает данный дизайн и вы бы хотели поменять его?

Ответ прост, вам нужно открыть файл jquery.fs.selecter.css и в нем делать правки, ведь именно он отвечает за оформление новых тегов select. О том, как это делать, смотрите в видеоуроке, который расположен ниже.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (4)

Андрей 22 февраля в 15:41

Александр. Скажите, почему в моб. версии не работают селекты, то есть. Касаешься к селекту, а его открытия не происходит. Я так понимаю no-touch влияет на это. Как исправить ошибку? Спасибо

Ответить

Сергей 30 октября 2016 г. в 16:49

добрый день, как изменить высоту? селекта и опшонов?

Ответить

Alex 24 июня 2016 г. в 21:29

для того чтоб он свернутый был надо прописать в стилях div.selecter-options{display:none}

Ответить

Mirza 14 марта 2016 г. в 21:19

У меня такая же проблема выводит развернутый селект. что сделать чтобы он как нужно свернутым отображался?

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад