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

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

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

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

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

<link href="css/on-off-switch.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/on-off-switch.js"></script>
<script src="js/on-off-switch-onload.js"></script>

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

<input type="checkbox" class="custom-switch" name="switch">
<input type="checkbox" class="custom-switch" name="switch">
<input type="checkbox" class="custom-switch" name="switch">
<input type="checkbox" class="custom-switch" name="switch">
<input type="checkbox" name="switch" id="checkbox">

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

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

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

	<script>
new DG.OnOffSwitchAuto({
	cls:'.custom-switch',
	textOn:"YES",
	height:35,
	textOff:"NO",
	textSizeRatio:0.35
});
	</script>

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

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

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

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

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

new DG.OnOffSwitch({
	el:'#checkbox',
	textOn:"Вкл.",
	height:35,
	textOff:"Выкл.",
	trackColorOn:'#F57C00',
	trackColorOff:'#666',
	trackBorderColor:'#555',
	textColorOff:'#fff',
	textSizeRatio:0.35
});

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree