Реклама
timeweb
falbar

Делаем красивые чекбоксы в стиле IOS7

27 ноября 2014 1665 0

Недавно наткнулся на интересную 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);

В результате получаем:

primer-chekboksov-v-stile-ios7

Вы можете применить эффект новых красивых чекбоксов на любом количестве элементов для этого необходимо написать следующий код:

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 />

Получаем:

primer-chekboksov-v-stile-ios7-2

Теперь рассмотрим пример с изменением цвета, добавляем HTML:

<input type="checkbox" class="js-switch1" checked />

И пишем к нему JavaScript:

var jsSwitch5 = document.querySelector(".js-switch5");
var switchery5 = new Switchery(jsSwitch5, {
	color: "#fec200",
	secondaryColor: "#fe6b95"
});

Результат:

primer-chekboksov-v-stile-ios7-3

Как вы множите заметить управляться с этой библиотекой легко. В заключении к статье рассмотрим настройки switchery:

  • color – цвет чекбокса;
  • secondaryColor – цвет чекбокса, когда он в состояние false;
  • jackColor – цвет катушки;
  • className – название класса чекбокса;
  • disabled – состояние активности чекбокса;
  • disabledOpacity – прозрачность в состояние disabled = true;
  • speed – скорость анимации.
Реклама
Комментариев еще не оставлено
no_avatar