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

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

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

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

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

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

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

<div class="switch-btn"></div>

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

<div class="switch-btn switch-on"></div>

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

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

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

.switch-btn {
  display: inline-block;
  width: 62px; /* ширина переключателя */
  height: 24px; /* высота переключателя */
  border-radius: 12px; /* радиус скругления */
  background: #bfbfbf; /* цвет фона */
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
  content: "";
  height: 36px; /* высота кнопки */
  width: 36px; /* ширина кнопки */
  border-radius: 18px; /* радиус кнопки */
  background: #fff; /* цвет кнопки */
  top: -6px; /* положение кнопки по вертикали относительно основы */
  left: -6px; /* положение кнопки по горизонтали относительно основы */
  transition-duration: 300ms; /* анимация */
  box-shadow: 0 0 10px 0 #999999; /* тень */
  position: absolute;
  z-index: 1;
}
.switch-on {
  background: #fff;
  box-shadow: inset 0 0 10px 0 #999999; /* тень */
}
.switch-on::after {
  left: 30px;
  background: #118c4e;
}

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

.switch-btn {
  display: inline-block;
  width: 62px; /* ширина переключателя */
  height: 24px; /* высота переключателя */
  background: #bfbfbf; /* цвет фона */
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
  content: "";
  height: 36px; /* высота кнопки */
  width: 36px; /* ширина кнопки */
  background: #fff; /* цвет кнопки */
  top: -6px; /* положение кнопки по вертикали относительно основы */
  left: -12px; /* положение кнопки по горизонтали относительно основы */
  transition-duration: 300ms; /* анимация */
  box-shadow: 0 0 10px 0 #999999; /* тень */
  position: absolute;
  z-index: 1;
}
.switch-on {
  background: #fff;
  box-shadow: inset 0 0 10px 0 #999999; /* тень */
}
.switch-on::after {
  left: 36px;
  background: #118c4e;
}

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

.switch-btn {
  display: inline-block;
  width: 72px; /* ширина */
  height: 38px; /* высота */
  border-radius: 19px; /* радиус скругления */
  background: #bfbfbf; /* цвет фона */
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
  content: "";
  height: 32px; /* высота кнопки */
  width: 32px; /* ширина кнопки */
  border-radius: 17px;
  background: #fff; /* цвет кнопки */
  top: 3px; /* положение кнопки по вертикали относительно основы */
  left: 3px; /* положение кнопки по горизонтали относительно основы */
  transition-duration: 300ms; /* анимация */
  position: absolute;
  z-index: 1;
}
.switch-on {
  background: #118c4e;
}
.switch-on::after {
  left: 37px;
}

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

.switch-btn {
  display: inline-block;
  width: 72px; /* ширина */
  height: 38px; /* высота */
  background: #bfbfbf; /* цвет фона */
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
  content: "";
  height: 32px; /* высота кнопки */
  width: 32px; /* ширина кнопки */
  background: #fff; /* цвет кнопки */
  top: 3px; /* положение кнопки по вертикали относительно основы */
  left: 3px; /* положение кнопки по горизонтали относительно основы */
  transition-duration: 300ms; /* анимация */
  position: absolute;
  z-index: 1;
}
.switch-on {
  background: #118c4e;
}
.switch-on::after {
  left: 37px;
}

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

.switch-btn {
  display: inline-block;
  width: 72px; /* ширина */
  height: 38px; /* высота */
  background: #bfbfbf; /* цвет фона */
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
  content: "";
  height: 32px; /* высота кнопки */
  width: 32px; /* ширина кнопки */
  background: #fff; /* цвет кнопки */
  top: 3px; /* положение кнопки по вертикали относительно основы */
  left: 3px; /* положение кнопки по горизонтали относительно основы */
  transition-duration: 300ms; /* анимация */
  position: absolute;
  z-index: 1;
}
.switch-on {
  background: #118c4e;
}
.switch-on::after {
  left: 37px;
}

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

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

<script>
$('.switch-btn').click(function(){
  $(this).toggleClass('switch-on');
});
</script>

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

<script>
$('.switch-btn').click(function(){
  $(this).toggleClass('switch-on');
  if ($(this).hasClass('switch-on')) {
    $(this).trigger('on.switch');
  } else {
    $(this).trigger('off.switch');
  }
});
</script>

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

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

$('.switch-btn').on('on.switch', function(){
  console.log('Кнопка переключена в состояние on');
});
$('.switch-btn').on('off.switch', function(){
  console.log('Кнопка переключена в состояние off');
});

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

<script>
$(function(){
  $('.switch-btn').click(function (e, changeState) {
    if (changeState === undefined) {
      $(this).toggleClass('switch-on');
    }
    if ($(this).hasClass('switch-on')) {
      $(this).trigger('on.switch');
    } else {
      $(this).trigger('off.switch');
    }
  });

  $('.switch-btn').on('on.switch', function(){
    console.log('Кнопка переключена в состояние on');
  });

  $('.switch-btn').on('off.switch', function(){
    console.log('Кнопка переключена в состояние off');
  });

  $('.switch-btn').each(function(){
    $(this).triggerHandler('click', false);
  });

});
</script>

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

<!-- Два переключателя -->
<div class="switch-btn" data-id="#bl-1" style="margin: 10px;"></div>
<div class="switch-btn switch-on" data-id="#bl-2" style="margin: 10px;"></div>

<!-- Два элемента, первый переключатель управляет видимостью первого элемента, а второй - второго -->
<div id="bl-1" class="bl-hide" style="height: 20px; margin: 10px; background: orange;"></div>
<div id="bl-2" style="height: 20px; margin: 10px; background: lime;"></div>

...

<script>
  $(function () {
    $('.switch-btn').click(function () {
      $(this).toggleClass('switch-on');
      if ($(this).hasClass('switch-on')) {
        $(this).trigger('on.switch');
      } else {
        $(this).trigger('off.switch');
      }
    });
    $('.switch-btn').on('on.switch', function () {
      $($(this).attr('data-id')).removeClass('bl-hide');
    });
    $('.switch-btn').on('off.switch', function () {
      $($(this).attr('data-id')).addClass('bl-hide');
    });
  });
</script>

Андрей

24.04.2020, 16:24

Подскажите, а как сделать 1 переключатель, но чтобы в одном положении отображался один блок, а в другом — другой?
1. Александр Мальцев
  
  25.04.2020, 15:55
  Тут всё просто. В выключенном положении включаете отображение 1-ого блока и выключаете 2-ого. В включенном — наоборот.
  Например:
```
$('#switch-btn-1').click(function () {
  $(this).toggleClass('switch-on');
  if ($(this).hasClass('switch-on')) {
    $(this).trigger('on.switch');
  } else {
    $(this).trigger('off.switch');
  }
});
$('#switch-btn-1').on('on.switch', function () {
  $('#block-1').addClass('bl-hide');
  $('#block-2').removeClass('bl-hide');
});
$('.switch-btn').on('off.switch', function () {
  $('#block-1').removeClass('bl-hide');
  $('#block-2').addClass('bl-hide');
});
```
  Пример в песочнице доступен по этой ссылке.

Егор

19.11.2019, 15:44

Самый нижний пример, только видоизменил, работает, но не знаю насколько правильно сделал.

	$(function () {
		$('.switch-btn').click(function () {
			$(this).toggleClass('switch-on');
			if ($(this).hasClass('switch-on')) {
				$(this).trigger('on.switch');
			} else {
				$(this).trigger('off.switch');
			}
		});
		$('.switch-btn').on('on.switch', function () {
			$('.price-norm').addClass('price-hide');
			$('.price-sell').removeClass('price-hide');
		});
		$('.switch-btn').on('off.switch', function () {
			$('.price-sell').addClass('price-hide');
			$('.price-norm').removeClass('price-hide');
		});
	});

Александр Мальцев

20.11.2019, 12:00

Синтаксически всё правильно.

Егор

18.11.2019, 18:42

Здравствуйте, спасибо, нужно было сделать переключатель цен в таблице со скидкой и без, как раз то, что нужно.
1. Александр Мальцев
  
  19.11.2019, 15:34
  
  Привет! Рад, что данный переключатель помог.