—»     —»   Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3
  Раздел: Руководства   Нет комментариев  

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3



Если вам надоело использовать кнопки для переключения чего-либо, то вероятно вам понравится идея использовать переключатели. С удивительным развитием веб-разработки сегодня можно наблюдать появления множества новых элементов, и стоит отметить, что создание переключателей on/off, которые мы так часто встречаем в мобильных ОС, сегодня не представляет сложности. Вам нужно лишь найти подходящий инструмент для этого.

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

Сегодня мы хотим представить вам веб-приложение под названием On/Off FlipSwitch Generator, которое поможет вам без труда создавать собственные кнопки on/off наподобие тех, что можно наблюдать практически в любом интерфейсе мобильных ОС. Эта кнопка также совместима с большинством современных браузеров: Chrome, Firefox, Safari, Opera, IE9, Android и iOS.

Приступаем к работе

On/Off FlipSwitch Generator оборудована довольно простым и интуитивно понятным интерфейсом. Здесь также представлен функционал превью в режиме реального времени, который позволит вам тут же видеть результат примененных стилей. Давайте приступим.

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

Как можно видеть на приведенном скриншоте, On/Off FlipSwitch Generator представлен с 6 основными опциями ввода: Style, Active State, Inactive State, Switch, Labels and Sizing.

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

В разделе Style вы можете выбрать, какой стиль должен быть применен к оформлению кнопки: iOS4/5, Android and Windows 8. Опция Custom позволит вам создать собственную кнопку с нуля.

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

Ниже представлено 2 полезные ссылки: Random style предназначена для создания случайной кнопки. При том кнопка Reset позволит вам сбросить настройки до умолчаний.

Ниже вы можете увидеть образ вашей кнопки в активном и неактивном состояниях. В этих разделах вы можете обыграть фоновый цвет, цвет текста, а также выставить ярлык кнопки. Вы можете изменить ярлык с ON/OFF на что-нибудь что вам будет угодно (пусть это будет, к примеру, Mute/Unmute).

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

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

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

Вы также можете настроить внешний вид ярлыка кнопки: размер шрифта и отступы, а также размер самой кнопки: ширину, высоту и уровень закругления границ.

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3
Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

Получаем готовую кнопку

Довольны стилем, которого вам удалось добиться? Теперь давайте скопируем полученный код, и применим его в собственном проекте. Прокрутите страницу до полученного кода. Коды представлены в форматах HTML и CSS, а вам остается лишь нажать кнопку Copy to clipboard.

Создаем on/off-переключатель при помощи FlipSwitch Generator на чистом коде CSS3

Реализуем поддержку IE8

На странице отмечено, что созданные переключатели не будут поддерживаться на IE6-8. Однако есть небольшое решение, которое позволит вам реализовать поддержку как минимум на IE8.

Чтобы включить поддержку в IE8, все что вам нужно, это добавить немного CSS-кода, который будет изменять состояние кнопки на базе класса .onoffswitch-checked.

.onoffswitch-checked .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
right: 0px;
}

Затем, чтобы переключить класс .onoffswitch-checked, вам нужно добавить следующий javascript-код:

<script>
$(document).ready(function(){
$('.onoffswitch-label').click(function(){
$(this).parent().toggleClass('onoffswitch-checked');
});
});
</script>

Если по умолчанию отмечена опция ”Switch ON by default”, не забудьте также включить класс .onoffswitch-checked в ваш HTML-код.

<div class="onoffswitch onoffswitch-checked">

В завершение

Обязательно ознакомьтесь с этим подходом, и расскажите нам о своем мнении, или если столкнетесь с какими-либо проблемами. Если вы не владеете соответствующими навыками в разработке кода, то этот генератор может помочь вам без труда решать соответствующие проблемы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, генераторы, кнопки
Опубликовал Design FactoRy   Прочитано (раз): 3886   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031