Как сделать переключатели в стиле iOS7.
Среди нас наверняка есть те, кому нравится стиль iOS7. Сегодня я хочу показать вам библиотеку, которая поможет вам сделать красивые переключатели в данном стиле.
Найти ее вы можете здесь:
Скачать исходники вы можете, кникнув по кнопке "Fork the GitHub repository".
Конечно же, подключите файлы
<link rel="stylesheet" href="dist/switchery.css" />
<script src="dist/switchery.js"></script>
Проведите инициализацию
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
У данной библиотеки есть несколько параметров:
- color - цвет переключателя(rgb или hex)
- secondaryColor - второй цвет для заднего фона и рамки, когда переключатель в выключенном положении
- className - имя класса для переключателя
- disabled - активен элемент или нет
- disabledOpacity - непрозрачность переключателя, когда disabled равен true(от 0 до 1)
- speed - скорость переключения
Некоторые примеры
Добавим включенный переключатель на страницу
<input type="checkbox" class="js-switch" checked />
Вы можете добавить столько переключателей, сколько захотите, до тех пор, пока они имеют один и тот же класс.
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
Больше примеров вы сможете найти все на том же сайте по ссылке в начале статьи.
Поддерживаются все современные браузеры, включая IE8+
Спасибо за внимание и удачи!
-
Создано 26.08.2014 20:47:20
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.