Топ плагинов jQuery. Плагин jquery-on-off-switch

Топ плагинов jQuery. Плагин jquery-on-off-switch

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с плагином jquery-on-off-switch, который позволяет создавать красивые переключатели чекбоксы для форм.

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

Итак, идем на официальный репозиторий плагина jquery-on-off-switch и скачиваем оттуда. После чего подключаем к нашей странице:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Теперь создадим несколько чекбоксов на странице:

Пока что мы имеем стандартную картину:

Топ плагинов jQuery. Плагин jquery-on-off-switch

Плагин предполагает два варианта использования: автоматический и ручной. Автоматический вариант подойдет, если у нас много переключателей и мы хотим вызвать плагин для всех сразу, в данном случае по наименованию класса, который указан для первых четырех переключателей. Сделать это можно так:

Теперь картина кардинально изменилось, мы получили действительно переключатели.

Топ плагинов jQuery. Плагин jquery-on-off-switch

А вот как выглядит включенное состояние:

Топ плагинов jQuery. Плагин jquery-on-off-switch

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

Топ плагинов jQuery. Плагин jquery-on-off-switch

Как видим, мы обращаемся к элементу по его ID и при этом вместо метода OnOffSwitchAuto используем метод OnOffSwitch. Также дополнительно мы передали несколько опций, отвечающих за оформление переключателя. Удобно, не так ли?

Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree