От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с плагином jquery-on-off-switch, который позволяет создавать красивые переключатели чекбоксы для форм.
Вариантов таких плагинов можно найти десятки в сети. Они популярны, поскольку позволяют оформить те элементы формы, которые сложно поддаются оформлению через CSS, в данном случае речь идет о чекбоксах формы. Из стандартного чекбокса, в котором можно поставить или убрать галочку, плагин позволяет сделать полноценный красивый переключатель.
Итак, идем на официальный репозиторий плагина jquery-on-off-switch и скачиваем оттуда. После чего подключаем к нашей странице:
|
1 2 3 4 |
<link href="css/on-off-switch.css" rel="stylesheet"> <script src="//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> |
Теперь создадим несколько чекбоксов на странице:
|
1 2 3 4 5 |
<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"> |
Пока что мы имеем стандартную картину:
Плагин предполагает два варианта использования: автоматический и ручной. Автоматический вариант подойдет, если у нас много переключателей и мы хотим вызвать плагин для всех сразу, в данном случае по наименованию класса, который указан для первых четырех переключателей. Сделать это можно так:
|
1 2 3 4 5 6 7 8 9 |
<script> new DG.OnOffSwitchAuto({ cls:'.custom-switch', textOn:"YES", height:35, textOff:"NO", textSizeRatio:0.35 }); </script> |
Теперь картина кардинально изменилось, мы получили действительно переключатели.
А вот как выглядит включенное состояние:
Ну и ручной вызов плагина для последнего переключателя может быть таким:
|
1 2 3 4 5 6 7 8 9 10 11 |
new DG.OnOffSwitch({ el:'#checkbox', textOn:"Вкл.", height:35, textOff:"Выкл.", trackColorOn:'#F57C00', trackColorOff:'#666', trackBorderColor:'#555', textColorOff:'#fff', textSizeRatio:0.35 }); |
Как видим, мы обращаемся к элементу по его ID и при этом вместо метода OnOffSwitchAuto используем метод OnOffSwitch. Также дополнительно мы передали несколько опций, отвечающих за оформление переключателя. Удобно, не так ли?
Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
