Як зробити перемикачі в стилі ios7.

Серед нас, напевно, є ті, кому подобається стиль iOS7. Сьогодні я хочу показати вам бібліотеку, яка допоможе вам зробити красиві перемикачі в даному стилі.

Знайти її ви можете тут:

Відео: Як змінити перемикачі в Control Center iOS 7 з Твіко FlipControlCenter

Switchery

Завантажити вихідні ви можете, кнікнув по кнопці "Fork the GitHub repository".

Відео: Як додати центр повідомлень в стилі iOS 7 на екран блокування iPhone (джейлбрейк Твік Ayra)

Звичайно ж, підключіть файли

rel="Stylesheet"href="Dist / switchery.css"/ Gt;

проведіть ініціалізацію

var elem = document.querySelector(`.js-switch`) - 
var init =newSwitchery(elem) -

У даній бібліотеки є кілька параметрів:

Відео: Як змінити панель багатозадачності iOS 7 з Твіко Imperium

color - колір перемикача (rgb або hex)
secondaryColor - другий колір для заднього фону і рамки, коли перемикач в положенні
className - ім`я класу для перемикача
disabled - активний елемент чи ні
disabledOpacity - непрозорість перемикача, коли disabled дорівнює true (від 0 до 1)
speed - швидкість перемикання

деякі приклади

Додамо включений перемикач на сторінку

Відео: Як додати багатофункціональний слайдер в Control Center iOS 7 з Твіко CCSliders

type="Checkbox"class="Js-switch"checked/ Gt;

Ви можете додати стільки перемикачів, скільки захочете, до тих пір, поки вони мають один і той же клас.

var elems =Array.prototype.slice.call(document.querySelectorAll(`.js-switch`)) - 
elems.forEach(function(html){ 
var switchery =newSwitchery(html) - 
}) -