Конвертировать HTML-флажок в iOS 7 с помощью Switchery.js

Флажок очень полезен для предоставления пользователям ввода. Когда пользователи вводят истинное значение, в маленьком квадратном поле отображается галочка. Настроить вид флажка можно легко с помощью CSS. Несмотря на это, настройка влияет только на поле и стиль проверки. Чтобы настроить флажок с действительно другим дизайном, требуется немного кода.

С помощью Switchery хотя, настройка флажка — это кусок пирога. Он может автоматически конвертировать ваш флажок в красивую кнопку переключения в стиле iOS7. Переключатели также могут быть настроены в соответствии с вашим дизайном. Давайте проверим это.

Рекомендуемое чтение: 10 полезных резервных методов для CSS и Javascript

Начало работы с Switchery

Switchery — это бесплатная автономная библиотека javascript. Чтобы установить его, вам просто нужно включить JavaScript и файл стиля Switchery в ваш веб. Вы можете получить оба файла из GitHub,

Чтобы преобразовать свой старомодный флажок, просто включите свой элемент флажка с классом, который будет ссылаться на Switchery.

Задать начальное состояние флажка также очень просто. Вы можете сделать это, включив проверенный атрибут в HTML для проверенного состояния при первой загрузке. Например, мы добавим демонстрационный класс в флажок с проверенным состоянием, например, так:

На данный момент флажок еще не изменился. Нам все еще нужно добавить следующий код JavaScript в HTML. Здесь мы помещаем определенный класс флажка и даем некоторые опции (если необходимо).

Это оно!

Настроить переключатель

Чтобы дать некоторую возможность, это может быть сделано в JavaScript. Эта опция может изменить внешний вид переключателя по умолчанию. Ниже приведены все доступные варианты:

• color: чтобы изменить цвет элемента переключателя, работайте со значением HEX или RGB
• secondColor: изменить цвет состояния «off» переключателя тени и границы
• className: настроить имя класса элемента switch в стиле switchery.css
• disabled: включить или отключить включение событий щелчка, заполненных логическими значениями (true или false)
• disabledOpacity: изменить непрозрачность переключателя, если для параметра disabled задано значение true, в диапазоне от 0 до 1
• скорость: изменить длительность перехода, например, «0,1 с», «0,5 с», «2,2 с»

Например, с нашим предыдущим переключателем, давайте изменим его первый и дополнительный цвет. В переменной init после атрибута elem просто поместите параметр в пару скобок curl следующим образом:

И вот результат:

Вместо того, чтобы настраивать только дизайн состояний, есть еще много доступных опций, таких как отображение нескольких коммутаторов или связывание коммутатора с другими элементами и получение его текущего состояния. Как всегда страница документации это полезное место для посещения.

Вывод

С помощью такого инструмента, как Switchery, адаптировать любой тип дизайна с любого устройства становится все проще. Более того, он был протестирован и поддерживается во многих современных браузерах, таких как Chrome, Firefox, Opera, Safari и IE8 +. Если вы хотите адаптировать другой дизайн виджетов в стиле iOS 7, вы можете попробовать Powerange для управления ползунком диапазона.