Switchery - бібліотека для стилізації чекбоксів
Як і в минулій статті, чекбокси оформлені в стилі iphone:
Для того, щоб почати роботу, потрібно завантажити і підключити бібліотеку і стилі. Завантажити можна за цим посиланням. А підключаємо наступним чином (між тегами head):
Тепер, як зазвичай створюємо чекбокс, але з класом "js-switch" і елементом "Checked"
А для того, щоб стилізувати чекбокс, необхідно нижче додати скрипт:
Так ви досягнете стилізації, яка прописана за замовчуванням (С зеленим фоном). Для того, щоб змінити фон і інші параметри можна піти двома шляхами:
Або змінити вихідні дані у файлі switchery.js:
Де color - колір перемикача; SecondaryColor - колір тіні і кордони, в момент, коли перемикач виключений; className - ім'я класу у елемента перемикача; disabled - включення або блокування події клацання (активний / неактивний); disabledOpacity - прозорість перемикача (від 0 до 1); speed - швидкість зміни положення бігунка.
Або міняти параметри прямо в html. Наприклад, змінити колір фону можна так:
А прозорість неактивного перемикача так:
Якщо ви хочете використовувати кілька чекбоксів, скористайтеся наступним кодом:
А на сьогодні - все! Всім удачі. Бувай!
Це цікаво:
- Як закріпити шапку сайту при прокручуванні сторінки
- Закреслення ціни. Ще один тригер, який може підвищити конверсію
- Створення css градієнта онлайн
