Если вам надоело использовать кнопки для переключения чего-либо, то вероятно вам понравится идея использовать переключатели. С удивительным развитием веб-разработки сегодня можно наблюдать появления множества новых элементов, и стоит отметить, что создание переключателей on/off, которые мы так часто встречаем в мобильных ОС, сегодня не представляет сложности. Вам нужно лишь найти подходящий инструмент для этого.
Сегодня мы хотим представить вам веб-приложение под названием On/Off FlipSwitch Generator, которое поможет вам без труда создавать собственные кнопки on/off наподобие тех, что можно наблюдать практически в любом интерфейсе мобильных ОС. Эта кнопка также совместима с большинством современных браузеров: Chrome, Firefox, Safari, Opera, IE9, Android и iOS.
Приступаем к работе
On/Off FlipSwitch Generator оборудована довольно простым и интуитивно понятным интерфейсом. Здесь также представлен функционал превью в режиме реального времени, который позволит вам тут же видеть результат примененных стилей. Давайте приступим.
Как можно видеть на приведенном скриншоте, On/Off FlipSwitch Generator представлен с 6 основными опциями ввода: Style, Active State, Inactive State, Switch, Labels and Sizing.
В разделе Style вы можете выбрать, какой стиль должен быть применен к оформлению кнопки: iOS4/5, Android and Windows 8. Опция Custom позволит вам создать собственную кнопку с нуля.
Ниже представлено 2 полезные ссылки: Random style предназначена для создания случайной кнопки. При том кнопка Reset позволит вам сбросить настройки до умолчаний.
Ниже вы можете увидеть образ вашей кнопки в активном и неактивном состояниях. В этих разделах вы можете обыграть фоновый цвет, цвет текста, а также выставить ярлык кнопки. Вы можете изменить ярлык с ON/OFF на что-нибудь что вам будет угодно (пусть это будет, к примеру, Mute/Unmute).
Switch позволяет вам управлять стилем самого переключателя. Здесь можно настраивать размер переключателя, цвет фона и границ, а также стандартное расположение переключателя. В Dual можно указывать разные цвета переключателя в зависимости от положения тумблера.
Вы также можете настроить внешний вид ярлыка кнопки: размер шрифта и отступы, а также размер самой кнопки: ширину, высоту и уровень закругления границ.
Получаем готовую кнопку
Довольны стилем, которого вам удалось добиться? Теперь давайте скопируем полученный код, и применим его в собственном проекте. Прокрутите страницу до полученного кода. Коды представлены в форматах HTML и CSS, а вам остается лишь нажать кнопку Copy to clipboard.
Реализуем поддержку IE8
На странице отмечено, что созданные переключатели не будут поддерживаться на IE6-8. Однако есть небольшое решение, которое позволит вам реализовать поддержку как минимум на IE8.
Чтобы включить поддержку в IE8, все что вам нужно, это добавить немного CSS-кода, который будет изменять состояние кнопки на базе класса .onoffswitch-checked.
| Исходный код |    |
.onoffswitch-checked .onoffswitch-inner { margin-left: 0;
}
.onoffswitch-checked .onoffswitch-switch { right: 0px; }
Затем, чтобы переключить класс .onoffswitch-checked, вам нужно добавить следующий javascript-код:
| Исходный код | |
$(document).ready(function(){ $('.onoffswitch-label').click(function(){ $(this).parent().toggleClass('onoffswitch-checked'); });
});
Если по умолчанию отмечена опция ”Switch ON by default”, не забудьте также включить класс .onoffswitch-checked в ваш HTML-код.
| Исходный код | |