Привет, друзья! Помните в одной из прошлых статей, я рассказывал, как средствами CSS сделать красивые чекбоксы. Так вот, тогда, способ реализации мне не очень понравился, и я спрашивал у вас, нет ли чего-то более нативного и привлекательного с точки зрения валидной верстки и т.д.? Недавно, я нашел javascript - библиотеку, которвя позволяет добиться еще лучшего эффекта.
Switchery - библиотека для стилизации чекбоксов
Как и в прошлой статье, чекбоксы оформлены в стиле iphone:
Для того, чтобы начать работу, нужно скачать и подключить библиотеку и стили. Скачать можно по этой ссылке. А подключаем следующим образом (между тегами 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(в), которое вам необходимо, но следите, чтобы у них был одинаковый класс. Простота реализации меня впечатлила. Надеюсь и вам данная статья будет полезна.
А на сегодня - все! Всем удачи. Пока!