Как да направите iOS7 Style Switchers
Със сигурност има хора сред нас, които харесват стила на iOS7. Днес искам да ви покажа библиотека, която ще ви помогне да направите красиви ключове в този стил.
Можете да го намерите тук:
Можете да изтеглите източниците, като щракнете върху бутона „Форк на GitHub repository“.
Разбира се, включете файлове
varelem = document.querySelector('.js-switch'); var init = new Switchery(elem);
Тази библиотека има няколко опции:
- цвят- превключване на цвят (rgb или шестнадесетичен)
- secondaryColor- втори цвят за фон и рамка, когато ключът е изключен
- className- име на клас за радио бутона
- disabled- елементът е активен или не
- disabledOpacity- непрозрачността на бутона за избор, когато е деактивиран, е вярна (от 0 до 1)
- скорост- скорост на превключване
Няколко примера
Добавете активиран бутон за избор към страницата
Можете да добавите колкото искате радио бутони, стига да са от един и същ клас.
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function(html) var switchery = new Switchery(html); >);
Още примери можете да намерите на същия сайт на връзката в началото на статията.
Поддържат се всички съвременни браузъри, включително IE8+
Благодаря за вниманието и успех!
Добавете ме като приятелVKontakte: http://vk.com/myrusakov. Ако искате да оцените мен и работата ми, напишете го в моята група: http://vk.com/rusakovmy.
Препоръчайте тази статия на вашите приятели:
Ако харесвате сайта, поставете връзка към него (на вашияуебсайт, във форума, в контакт):
Тя изглежда така: