Показать Меню
falbar Чекбоксы в стиле iOS7

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

Чекбоксы в стиле iOS7

Недавно наткнулся на интересную javascript библиотеку при помощи, которой можно изменить стандартные стили чекбоксов на более красивые в формате iOS7.

Библиотека называется switchery и живет она на abpetkov.github.io/switchery ресурсе. Для того чтобы начать ею пользоваться подключаем файлы:

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

Получаем:

Пример чекбоксов №2

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

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

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

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

Результат:

Пример чекбоксов №3

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

  • color – цвет чекбокса;
  • secondaryColor – цвет чекбокса, когда он в состояние false;
  • jackColor – цвет катушки;
  • className – название класса чекбокса;
  • disabled – состояние активности чекбокса;
  • disabledOpacity – прозрачность в состояние disabled = true;
  • speed – скорость анимации.
Источник
abpetkov.github.io/switchery

Подписаться на обновления

Комментариев еще не оставлено