Как сделать из переключателя кнопку

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

Схему оставляем с прошлого занятия. Но при нажатии на кнопку диод загорается, при повторном нажатии — гаснет.

Этапы работы

  • Пробуем
  • Разочаровываемся
  • Разбираемся
  • Совершенствуем
  • Додумываем

Пробуем

В операторе digitalWrite мы можем вместо слов LOW/HIGH написать переменную, присвоив ей нужное значение. Например так:

int ledStatus = HIGH;

Еще мы можем поменять значение переменной ledStatus на противоположное:

Наш первый проект Blink с применением полученных знаний можно написать так:

int ledStatus = LOW;
void setup () pinMode(13,OUTPUT);
>
void loop () digitalWrite(13,ledStatus);
ledStatus = !ledStatus;
delay(1000);
>

Теперь вспомним о кнопке — когда мы её нажимаем, будем менять значение переменной ledState на противоположное:

Pin2 = digitalRead(2);
if (Pin2==HIGH)
ledStatus=!ledStatus;
>
digitalWrite (13,ledStatus);

Полная программа выглядит так:

int ledStatus = LOW;
int Pin2 = LOW;
void setup () pinMode(13,OUTPUT);
pinMode(2,INPUT);
>
void loop () Pin2 = digitalRead(2);
if (Pin2==HIGH) ledStatus=!ledStatus;
>
digitalWrite (13,ledStatus);
>

Собираем, пробуем…

Странно работает. Как-то нечетко. Обратите внимание на потерю яркости диода во время нажатия на кнопку. В чем же дело?

Разбираемся

Попробуйте замедлить многократно свои действия, не забывая, что процессор Arduino или ChipKit работает с огромной скорость. Что же происходит с точки зрения контроллера?

Вот вы прикоснулись к кнопке, медленно-медленно нажали на неё — контакт замкнулся, в Pin2 попала логическая 1 (HIGH) и программа с радостью отработала if и переключила состояние ledState на противоположное, зажгла диод,и ринулась на следующий виток цикла loop. А палец-то Ваш всё еще жмет на кнопку. В Pin2 опять попадает единица, ledState опять поменялся (уже на LOW), доиод потух и программа ринулась на следующий виток… И так много-много раз в течение даже короткого с Вашей точки зрения нажатия. Диод очень быстро мигает и кажется, что он просто светится не на полную яркость. В дальнейшем мы это его свойство используем (правильнее говорить об особенности зрительного восприятия нашего мозга — диод практически не обладает инерционностью и действительно полностью гаснет и полностью зажигается. Но очень быстро).
Что же будет в переменной ledState при отпускании кнопки? Как повезёт — может 1 (HIGH), а может 0 (LOW). 50 на 50, как говорится.

Вот так работает написанная нами программа.

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

Совершенствуем

Для реализации идеи создадим пару переменных — oldButton и currentButton (старое и текущее состояние кнопки).

Будем считывать состояние кнопки в переменную currentButton, а значение переменной ledState менять в том случае, если текущее состояние кнопки (currentBottom) — 1, а предыдущее состояние кнопки (oldButton) — 0. Поменялось значение переменной ledState или нет, но информация о состоянии кнопки после ветвления устаревает и в переменную oldButton пишем текущее состояние: oldBotton = currentBotton.

int ledStatus = LOW;
int oldButton = LOW, currentButton = LOW;
void setup () pinMode(13,OUTPUT);
pinMode(2,INPUT);
>
void loop () currentButton = digitalRead(2);
if (currentButton==HIGH && oldButton == LOW) ledStatus=!ledStatus;
>
oldButton=currentButton;
digitalWrite (13,ledStatus);
>

Додумываем

Новая проблема — программа работает с delay’ем внутри! Тормозим, однако. Пусть задержка будет только при нажатой кнопке. Если currenButtom равно HIGH.

int ledStatus = LOW;
int oldButton = LOW, currentButton = LOW;
void setup () pinMode(13,OUTPUT);
pinMode(2,INPUT);
>
void loop () currentButton = digitalRead(2);
if (currentButton==HIGH)
if (currentButton==HIGH && oldButton == LOW) ledStatus=!ledStatus;
>
oldButton=currentButton;
digitalWrite (13,ledStatus);
>

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

Управление нагрузкой одной кнопкой без фиксации, принципиальная схема

Приведенная схема проста до безобразия и состоит из трех транзисторов, две из которых обратной проводимости. Работает она по следующему принципу - при первом нажатии светодиод засветится, при повторном - потухнет.

Управление нагрузкой одной кнопкой без фиксации, включено
Управление нагрузкой одной кнопкой без фиксации, выключено

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

Как это работает

В начальный момент, когда на схему подается питание, все три транзистора закрыты, одновременно через цепочку резисторов R1 и R2 заряжается электролитический конденсатор C1, напряжение на нем равно напряжению питания. При нажатии на кнопку положительный сигнал с конденсатора поступает на базу транзистора VT3 отпирая его, по открытому переходу этого транзистора напряжение поступает на базу транзистора VT2, в следствии чего он также открывается. Нагрузка, в нашем случае светодиод, тоже активируется, еще во время срабатывания транзистора VT3.

Эта часть схемы представляет из себя триггерную защелку. Транзистор VT3 открывает VT2, а тот открываясь подает напряжение на базу транзистора VT3 удерживая его в открытом состоянии.

В таком состоянии схема может находится бесконечно долгое время. Притом кнопку можно просто нажать и отпустить, а не удерживать в нажатом состоянии.

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

При повторном нажатии кнопки база транзистора VT3 оказывается подключенной к минусовой обкладке конденсатора C1, на базе ключа напряжение в районе 0,7 вольт, и в следствии заряда конденсатора оно просаживается и он запирается. С запиранием транзистора VT3, конденсатор опять начинает заряжаться в штатном режиме, через ранее указанные резисторы.

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

Управление нагрузкой одной кнопкой без фиксации, принципиальная схема

Использованные в схеме транзисторы не критичны, можно взять любые малой и средней мощности соответствующей проводимости. Номиналы других компонентов схемы можно отклонять в ту или иную сторону на 30%.

Схема не прожорливая, от источника питания в 5 вольт ток потребления без нагрузки всего 850 микроАмпер, так, что смело можно задействовать в качестве выключателя ну скажем в карманном фонарике.

Управление нагрузкой одной кнопкой без фиксации, ток потребления без нагрузки всего 850 микроАмпер
Управление нагрузкой одной кнопкой без фиксации, умощнённая схема

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

  • С фиксацией – кнопка остаётся нажатой после отпускания, без фиксации – отключается обратно.
  • Нормально разомкнутая (Normal Open, NO) – при нажатии замыкает контакты. Нормально замкнутая (Normal Closed, NC) – при нажатии размыкает контакты.
  • Тактовые кнопки – замыкают или размыкают контакт. У обычных тактовых кнопок ноги соединены вдоль через корпус (см. картинку ниже). Переключатели – обычно имеют три контакта, общий COM, нормально открытый NO и нормально закрытый NC. При отпущенной кнопке замкнута цепь COM-NC, при нажатой замыкается COM-NO.


blank

Подключение и подтяжка

Из урока про цифровые пины вы помните, что микроконтроллер может считывать напряжение со своей ноги. Соответственно кнопка может подать на пин тот уровень, к которому подключена её вторая нога. В том же уроке мы обсуждали, что не подключенный никуда цифровой пин принимает наводки из воздуха, и считанное с него значение будет практически случайным. То есть подключив к пину 5V (сигнал высокого уровня) через кнопку, мы ничего не добьёмся: при нажатой кнопке на пине будет считываться четкий сигнал высокого уровня, а при отпущенной – случайное значение. Для решения этой проблемы существует такое понятие, как подтяжка (pull) пина. Подтяжка выполняется к земле (pull down) или питанию (pull up) микроконтроллера при помощи резистора. Подтяжка выполняется противоположно принимаемому сигналу, т.е. если нужно ловить высокий сигнал, подтяжка выполняется к земле, если ловить нужно сигнал земли – подтяжка выполняется к питанию. Вот два варианта подключения кнопки, с подтяжкой к VCC и GND соответственно: Как выбирается сопротивление резистора? Тут всё очень просто: при нажатии на кнопку через резистор потечёт ток, так как в любом случае замыкается цепь питание-земля. Чем выше ток, больше потери энергии и нагрев резистора, а это никому не нужно, поэтому сопротивление резистора подтяжки обычно выбирается в диапазоне 5-50 кОм. Если ставить больше – подтяжка может не обеспечить стабильный уровень сигнала на пине, а если ставить меньше – будут больше потери энергии в нагрев резистора: при сопротивлении в 1 ком через него потечёт ток величиной 5 В/1000 Ом = 5 мА, для сравнения плата Ардуино с МК в активном режиме потребляет 20-22 мА. Чаще всего для подтяжки используется резистор на 10 кОм. Как вы помните из урока о цифровых пинах, у МК AVR есть встроенные резисторы для всех GPIO, эти резисторы подключены к питанию (к VCC), то есть буквально дублируют первую схему из этого урока и позволяют не использовать внешний резистор. У микроконтроллеров другой архитектуры бывает подтяжка к GND, или вообще может не быть внутренней подтяжки. При использовании подтяжки к питанию мы получим инвертированный сигнал – функция digitalRead() вернёт 1 при отпущенной кнопке, и 0 при нажатой (при использовании нормально-разомкнутой кнопки). Давайте подключим кнопку на пин D3 (и GND):

Алгоритмы

Отработка нажатия

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

Дребезг контактов

Кнопка не идеальна, и контакт замыкается не сразу, какое-то время он “дребезжит”. Прогоняя данный алгоритм, система опрашивает кнопку и условия приблизительно за 6 мкс, то есть кнопка опрашивается 166’666 раз в секунду! Этого достаточно, чтобы получить несколько тысяч ложных срабатываний. Избавиться от дребезга контактов можно как аппаратно, так и программно: аппаратно задача решается при помощи RC цепи, то есть резистора (~1-10k) и конденсатора (~100nF). Выглядит это следующим образом:

blank

blank

Программно можно ввести простейший таймер нажатия, основанный на millis() , время гашения дребезга примем 100 миллисекунд. Вот так будет выглядеть код:

Рекомендуется конечно же использовать аппаратный способ, так как он не нагружает ядро лишними расчетами. В 99.99% проектов будет достаточно программного антидребезга, так то смело используйте конструкцию с millis() .

“Импульсное” удержание

В устройствах с управлением кнопкой очень часто бывает нужна возможность изменения значения как однократно кликом по кнопке, так и “автоматически” с тем же шагом – при удержании. Такой вариант реализуется очень просто, добавлением ещё одного условия в наш предыдущий алгоритм, а именно: если кнопка была нажата, но ещё не отпущена, и прошло времени больше, чем задано – условие вернёт true . В примере ниже периодичность “нажатий” при удержании настроена на 500 миллисекунд (2 раза в секунду):

Пользоваться таким кодом напрямую будет неудобно, поэтому можно “обернуть” его в класс (читай урок про классы и урок про написание библиотек).

Простейший класс кнопки

Вот так предыдущий пример можно сделать классом (мы делали это вот в этом уроке), положить его в отдельный файл (button.h) и пользоваться:

Другие возможности кнопки

Кнопка только с виду кажется простым устройством, дающим 0 и 1, но, подключив фантазию и время, можно придумать гораздо больше применений обычной кнопке. В моей библиотеке GyverButton реализовано очень много всяких интересных возможностей по работе с кнопкой, вот список:

  • Работа с нормально замкнутыми и нормально разомкнутыми кнопками
  • Работа с подключением PULL_UP и PULL_DOWN Опрос кнопки с программным антидребезгом контактов (настраиваемое время)
  • Отработка нажатия, удерживания, отпускания, клика по кнопке (+ настройка таймаутов)
  • Отработка одиночного, двойного и тройного нажатия (вынесено отдельно)
  • Отработка любого количества нажатий кнопки (функция возвращает количество нажатий)
  • Функция изменения значения переменной с заданным шагом и заданным интервалом по времени
  • Возможность работы с “виртуальными” кнопками (все возможности библиотеки используются для матричных и резистивных клавиатур)

Подробное описание библиотеки можно почитать в заголовочном файле на странице библиотеки, также там есть много примеров.

Аналоговые клавиатуры

Аналоговые клавиатуры – достаточно глубокая тема, достойная отдельного урока (у меня его пока что нет). Максимально подробный урок-исследование можно посмотреть на сайте Codius.

Видео

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

Кнопка ардуино

Подключение кнопки к arduino

Кнопка (или кнопочный переключатель) – самый простой и доступный из всех видов датчиков. Нажав на нее, вы подаете контроллеру сигнал, который затем приводит к каким-то действиям: включаются светодиоды, издаются звуки, запускаются моторы. В своей жизни мы часто встречаемся с разными выключателями и хорошо знакомы с этим устройством.

Тактовые кнопки и кнопки-переключатели

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

Что такое кнопка? По сути, это достаточно простое устройство, замыкающее и размыкающее электрическую сеть. Выполнять это замыкание/размыкание можно в разных режимах, при этому фиксировать или не фиксировать свое положение. Соответственно, все кнопки можно поделить на две большие группы:

  • Кнопки переключатели с фиксацией. Они возвращаются в исходное состояние после того, как их отпустили. При в зависимости от начального состояния разделяют на нормально-замкнутые и нормально-разомкнутые кнопки.
  • Кнопки без фиксации (тактовые кнопки). Они фиксируются и остаются в том положении, в котором их оставили.

Вариантов различных кнопок великое множество, это действительно один из самых распространенных видов электронных компонентов.

Кнопки ардуино для простых проектов

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

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

Для удобства работы в комплекте с тактовой кнопкой обычно идет пластмассовый колпачок какого-то цвета, он достаточно очевидно надевается на кнопку и придает проекту менее хакерский вид.

Подключение кнопки Ардуино

Включение и выключение светодиода с помощью кнопки

Давайте начнем с самого простого способа подключения тактовой кнопки. Рассмотрим схему с Arduino в качестве источника питания, светодиода, ограничительного резистора номиналом 220 Ом и кнопки, которая будет замыкать и размыкать цепь.

Подключение тактовой кнопки к ардуино

Подключение кнопки к ардуино

Если у вас переключатель другого типа, то можете смело выбрать контакты с противоположных углов (на некоторых кнопка делается специальный знак в виде выемки, по которому можно определить, с какой стороны расположены спаренные контакты). Самый надежный способ определить правильные ножки – это прозвонить контакты тестером.

Сама схема с кнопкой, светодиодом и контроллером Arduino не нуждается в особых пояснениях. Кнопка разрывает цепь, светодиод не горит. При нажатии цепь замыкается, светодиод включается. Если вы перепутаете контакты (включите через замкнутые спаренные контакты кнопки), то кнопка работать не будет, потому что цепь никогда не разомкнется. Просто поменяйте контакты местами.

Подключение кнопки с подтягивающим резистором

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

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

Скетч для кнопки ардуино с подтягивающим резистором:

Подключение кнопки в режиме INPUT_PULLUP

В указанной выше схеме мы использовали резистор, называемый подтягивающим, для формирования определенного уровня сигнала на цифровом порту. Но есть другой способ подключить кнопку без резистора, используя внутренне сопротивление платы ардуино. В блоке setup мы должны всего лишь определить тип пина, к которому подключим кнопку, как INPUT_PULLUP.

Альтернативным вариантом будет выбрать режим пина как OUTPUT и установить на данный порт высокий уровень сигнала. Встроенный подтягивающий резистор подключиться автоматически.

И все. Можно собрать вот такую сложную схему и работать с кнопкой в скетче.

Кнопка ардуино без резистора

Мигание светодиода после нажатия на кнопку

Полная схема проекта изображена на рисунке:

Включение светодиода кнопкой в ардуино

Фрагмент схемы со светодиодом уже хорошо нам знаком. Мы собрали обычный маячок со светодиодом и ограничительным резистором. А вот во второй части мы видим знакомую нам кнопку и еще один резистор. Пока не будем вдаваться в подробности, просто соберем схему и закачаем в ардуино простой скетч. Все элементы схемы идут в самых простых стартовых наборах ардуино.

Нажимаем и держим – светодиод мигает. Отпускаем – он гаснет. Именно то , что хотели. Хлопаем от радости в ладоши и приступаем к анализу того, что сделали.

Давайте посмотрим на скетч. В нем мы видим довольно простую логику.

  1. Определяем, нажата ли кнопка.
  2. Если кнопка не нажата, то просто выходим из метода loop, ничего не включая и не меняя.
  3. Если кнопка нажата, то выполняем мигание, используя фрагмент стандартного скетча:
    1. Включаем светодиод, подавая напряжение на нужный порт
    2. Делаем нужную паузу при включенном светодиоде
    3. Выключаем светодиод
    4. Делаем нужную паузу при выключенном светодиоде

    Логика поведения кнопки в скетче может зависеть от способа подключения с подтягивающим резистором. Об этом мы поговорим в следующей статье.

    Дребезг кнопки ардуино

    В процессе работы с кнопками мы можем столкнуться с очень неприятным явлением, называемым дребезгом кнопки. Как следует из самого названия, явление это обуславливается дребезгом контактов внутри кнопочного переключателя. Металлические пластины соприкасаются друг с другом не мгновенно (хоть и очень быстро для наших глаз), поэтому на короткое время в зоне контакта возникают скачки и провалы напряжения. Если мы не предусмотрим появление таких “мусорных” сигналов, то будем реагировать на них каждый раз и можем привести наш проект к хаусу.

    Для устранения дребезга используют программные и аппаратные решения. В двух словах лишь упомянем основные методы подавления дребезга:

    • Добавляем в скетче паузу 10-50 миллисекунд между полкучением значений с пина ардуино.
    • Если мы используем прерывания, то программный метд использоваться не может и мы формируем аппаратную защиту. Простейшая из них – RC фильтр с конденсатором и сопротивлением.
    • Для более точного подавления дребезга используется аппаратный фильтр с использованием триггера шмидта. Этот вариант позволит получить на входе в ардуино сигнал практически идеальной формы.

    Более подробную информацию о способах борьбы с дребезгом вы можете найти в этой статье об устранении дребезга кнопок.

    Переключение режимов с помощью кнопки

    Для того, чтобы определить, была ли нажата кнопка, надо просто зафиксировать факт ее нажатия и сохранить признак в специальной переменной.

    Факт нажатия мы определяем с помощью функции digitalRead(). В результате мы получим HIGH (1, TRUE) или LOW(0, FALSE), в зависимости от того, как подключили кнопку. Если мы подключаем кнопку с помощью внутреннего подтягивающего резистора, то нажатие кнопки приведет к появлению на входе уровня 0 (FALSE).

    Для хранения информации о нажатии на кнопку можно использовать переменную типа boolean:

    boolean keyPressed = digitalRead(PIN_BUTTON)==LOW;

    Почему мы используем такую конструкцию, а не сделали так:

    boolean keyPressed = digitalRead(PIN_BUTTON);

    Все дело в том, что digitalRead() может вернуть HIGH, но оно не будет означать нажатие кнопки. В случае использования схемы с подтягивающим резистором HIGH будет означать, что кнопка, наоборот, не нажата. В первом варианте (digitalRead(PIN_BUTTON)==LOW ) мы сразу сравнили вход с нужным нам значением и определили, что кнопка нажата, хотя и на входе сейчас низкий уровень сигнала. И сохранили в переменную статус кнопки. Старайтесь явно указывать все выполняемые вами логические операции, чтобы делать свой код более прозрачным и избежать лишних глупых ошибок.

    Как переключать режимы работы после нажатия кнопки?

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

    Логика работы программы очень проста:

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

    Как определить нажатие нескольких кнопок?

    Нужно просто запомнить состояние каждой из кнопок в соответствующей переменной или в массиве ардуино. Здесь главное понимать, что каждая новая кнопка – это занятый пин. Поэтому если количество кнопок у вас будет большим, то возможно возникновение дефицита свободных контактов. Альтернативным вариантом является использование подключения кнопок на один аналоговый пин по схеме с резистивным делителем. Об этом мы поговорим в следующих статьях.

    CSS - Переключатель с использованием JavaScript

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

    Что такое переключатель

    Переключатель - это элемент интерфейса, предназначенный для выбора одно из двух состояний (включено или выключено).

    Данный элемент можно использовать в некоторых случаях в качестве альтернативы checkbox (флажку).

    HTML разметка переключателя

    HTML код переключателя:

    Для отображения переключателя во включенном состоянии необходимо дополнительно к switch-btn добавить ещё класс switch-on :

    CSS стили для переключателя

    Создать дизайн переключателю можно по-разному. В качестве примера рассмотрим 5 вариантов дизайна.

    Дизайн переключателя как в Material Design

    Дизайн переключателя как в Material Design

    Дизайн переключателя для интерфейсов, не использующих скругления углов

    Дизайн переключателя для интерфейсов, не использующих скругления углов

    Дизайн переключателя, в котором кнопка расположена внутри элемента, вдоль которого она перемещается

    Дизайн переключателя, в котором кнопка расположена внутри элемента, вдоль которого она перемещается

    Дизайн переключателя с квадратной кнопкой

    Дизайн переключателя с квадратной кнопкой

    Дизайн переключателя с градиентом

    Дизайн переключателя с градиентом

    JavaScript код для переключателя

    Изменение положение переключателя будем выполнять с помощью JavaScript. Для этого достаточно на страницу поместить следующий скрипт:

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

    Событие on.switch будет возникать при перемещении ползунка переключателя в положение включено, а off.switch – в выключено.

    Пример работы с событиями:

    Пример JavaScript сценария, который будет выполнять действия не только при переключении, но и после загрузки документа .

    Финальный пример с двумя переключателями, каждый из которых управляет видимостью определенного блока:

    Читайте также: