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

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

Аутентификация через «ВКонтакте»

2 декабря 2014 Антон Кулешов

Доброго времени суток, сегодня речь пойдет об авторизации пользователей на вашем сайте через социальную сеть «Вконтакте». Данный способ авторизации довольно популярен и его любят пользователи, ведь подобное решение избавляет от необходимости заполнять кучу полей формы, придумывать и запоминать пароль, ждать письма, подтверждать авторизацию на сайте. Ну а мы не заморачиваемся с проверками регулярных выражений, экономим место на хостинге и получаем сразу заполненный профиль пользователя с аватаркой, которую, к слову, редко кто спешит добавлять.

Простой прогресс бар с набором настроек

3 февраля 2015 Антон Кулешов

Если вы используете на своем сайте какие-либо калькуляторы, которым надо дать время на расчет, или просто сложные скрипты, то вам весьма пригодится такое расширение, как progressbar.

Ленивая загрузка картинок, используя jQuery

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

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин lazy load.