Недавно наткнулся на интересную JavaScript библиотеку при помощи, которой можно изменить стандартные стили чекбоксов на более красивые в формате IOS7.
Библиотека называется switchery и живет она на github ресурсе. Для того чтобы начать ею пользоваться подключаем файлы:
<link href="switchery.min.css" rel="stylesheet" />
<script src="switchery.min.js" type="text/javascript"></script>
Добавляем наш элемент на страницу:
<input type="checkbox" class="js-switch1" checked />
Вызываем скрипт:
var jsSwitch1 = document.querySelector(".js-switch1");
var init1 = new Switchery(jsSwitch1);
В результате получаем:
Вы можете применить эффект новых красивых чекбоксов на любом количестве элементов для этого необходимо написать следующий код:
var jsSwitch2 = Array.prototype.slice.call(document.querySelectorAll(".js-switch2"));
jsSwitch2.forEach(function(html){
var switchery = new Switchery(html);
});
Для примера добавим HTML:
<input type="checkbox" class="js-switch2" checked />
<input type="checkbox" class="js-switch2" />
<input type="checkbox" class="js-switch2" checked />
Получаем:
Теперь рассмотрим пример с изменением цвета, добавляем HTML:
<input type="checkbox" class="js-switch1" checked />
И пишем к нему JavaScript:
var jsSwitch5 = document.querySelector(".js-switch5");
var switchery5 = new Switchery(jsSwitch5, {
color: "#fec200",
secondaryColor: "#fe6b95"
});
Результат:
Как вы множите заметить управляться с этой библиотекой легко. В заключении к статье рассмотрим настройки switchery:
- color – цвет чекбокса;
- secondaryColor – цвет чекбокса, когда он в состояние false;
- jackColor – цвет катушки;
- className – название класса чекбокса;
- disabled – состояние активности чекбокса;
- disabledOpacity – прозрачность в состояние disabled = true;
- speed – скорость анимации.