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

27 ноября 2014 Антон Кулешов 1457 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
Читайте далее

О том, как я не очень «легко» коротал вечер в компании приложений Facebook

14 января 2016 Антон Кулешов

Миром овладели соцсети, а потому, мало кто станет регистрироваться на сайте или форуме, заполняя при этом кучу полей, добавляя аватарку и прочее. Дабы привлечь посетителей нам придется использовать API социальных сетей – где уже есть вся нужная нам информация для оформления профиля. Ранее мы уже рассматривали один из способов авторизации пользователя через «ВКонтакте», сегодня поговорим о Facebook.

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.

Adipoli – красивое представление ваших изображений

1 апреля 2015 Антон Кулешов

Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием adipoli, при помощи которого можно создавать красивые hover effects.