Конвертировать HTML-флажок в iOS 7 с помощью Switchery.js
Флажок очень полезен для предоставления пользователям ввода. Когда пользователи вводят истинное значение, в маленьком квадратном поле отображается галочка. Настроить вид флажка можно легко с помощью CSS. Несмотря на это, настройка влияет только на поле и стиль проверки. Чтобы настроить флажок с действительно другим дизайном, требуется немного кода.
С помощью Switchery хотя, настройка флажка — это кусок пирога. Он может автоматически конвертировать ваш флажок в красивую кнопку переключения в стиле iOS7. Переключатели также могут быть настроены в соответствии с вашим дизайном. Давайте проверим это.
Рекомендуемое чтение: 10 полезных резервных методов для CSS и Javascript
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Начало работы с 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 для управления ползунком диапазона.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)