Красивое оформление чекбоксов

switcheryПривет, друзья! Помните в одной из прошлых статей, я рассказывал, как средствами CSS сделать красивые чекбоксы. Так вот, тогда, способ реализации мне не очень понравился, и я спрашивал у вас, нет ли чего-то более нативного и привлекательного с точки зрения валидной верстки и т.д.? Недавно, я нашел javascript - библиотеку, которвя позволяет добиться еще лучшего эффекта.

Switchery - библиотека для стилизации чекбоксов

Как и в прошлой статье, чекбоксы оформлены в стиле iphone:

Оформление checkbox

Для  того, чтобы начать работу, нужно скачать и подключить библиотеку и стили. Скачать можно по этой ссылке.  А подключаем следующим образом (между тегами head):

<link rel="stylesheet" href="dist/switchery.css" />
<script src="dist/switchery.js"></script>

Это стандартные пути. Вы всегда можете их поменять, и оптимизировать сам код. Не забывайте, что лучше иметь одну таблицу стилей большего размера, чем несколько меньшего. Кроме того, в архиве есть сжатые файлы как CSS, так и javascript.

Теперь, как обычно создаем чекбокс, но с классом "js-switch" и элементом "Checked"

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

А для того, чтобы стилизовать чекбокс, необходимо ниже добавить скрипт:

<script>
   var elem = document.querySelector('.js-switch');
   var init = new Switchery(elem);
</script>

Так вы добьетесь стилизации, которая прописана по умолчанию (С зеленым фоном). Для того, чтобы изменить фон и другие параметры можно пойти двумя путями:

Либо изменить исходные данные в файле switchery.js:

   defaults = {
    color          : '#64bd63'
  , secondaryColor : '#dfdfdf'
  , className      : 'switchery'
  , disabled       : false
  , disabledOpacity: 0.5
  , speed          : '0.1s'
  }

Где color - цвет переключателя; SecondaryColor - цвет тени и границы, в момент, когда переключатель выключен; className - имя класса у элемента переключателя; disabled - включение или блокирование события щелчка (активный/неактивный); disabledOpacity - прозрачность переключателя (от 0 до 1); speed - скорость изменения положения бегунка.

Либо менять параметры прямо в html. Например, изменить цвет фона можно так:

 var switchery = new Switchery(elem, { color: '#41b7f1' });

стилизация чекбоксов

А прозрачность неактивного переключателя так:

 var switchery = new Switchery(elem, { disabled: true, disabledOpacity: 0.75 });

Если вы хотите использовать несколько чекбоксов, воспользуйтесь следующим кодом:

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});

Стилизованые чекбоксы

Соответственно, необходимо добавить то количество inputo(в), которое вам необходимо, но следите, чтобы у них был одинаковый класс. Простота реализации меня впечатлила. Надеюсь и вам данная статья будет полезна.

А на сегодня - все! Всем удачи. Пока!

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Добавить комментарий