Як зробити перемикачі в стилі iOS7
Серед нас, напевно, є ті, кому подобається стиль iOS7. Сьогодні я хочу показати вам бібліотеку, яка допоможе зробити гарні перемикачі в даному стилі.
Знайти її ви можете тут:
Завантажити вихідні коди ви можете, натиснувши на кнопку "Fork the GitHub repository".
Звичайно, підключіть файли
var elem = document.querySelector('.js-switch'); var init = new Switchery(elem);
Ця бібліотека має кілька параметрів:
- color- колір перемикача(rgb або hex)
- secondaryColor- другий колір для заднього фону та рамки, коли перемикач у вимкненому положенні
- className- ім'я класу для перемикача
- disabled- активний елемент чи ні
- disabledOpacity- непрозорість перемикача, коли disabled дорівнює true(від 0 до 1)
- speed- швидкість перемикання
Деякі приклади
Додамо увімкнений перемикач на сторінку
Ви можете додати стільки перемикачів, скільки захочете, доки вони мають один і той самий клас.
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function(html) var switchery = new Switchery(html); >);
Більше прикладів ви зможете знайти все на тому самому сайті за посиланням на початку статті.
Підтримуються всі сучасні браузери, включаючи IE8+
Дякуємо за увагу та удачі!
Додайте до мене у друзіВКонтакте: http://vk.com/myrusakov. Якщо Ви хочете дати оцінку мені та моїй роботі, то напишіть її в моїй групі: http://vk.com /rusakovmy.
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, розмістіть посилання на нього (у себе насайту, на форумі, в контакті):
Вона виглядає ось так: