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

Александр Мальцев
Александр Мальцев
22K
6
CSS - Переключатель с использованием JavaScript
Содержание:
  1. Что такое переключатель
  2. HTML разметка переключателя
  3. CSS стили для переключателя
  4. JavaScript код для переключателя
  5. Комментарии

В этой статье разберем процесс создания переключателя для сайта с использованием 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

Дизайн переключателя как в 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>

Комментарии:

  1. Андрей
    Андрей
    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');
      });
      
      Пример в песочнице доступен по этой ссылке.
    2. Егор
      Егор
      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');
      		});
      	});
      
      1. Александр Мальцев
        Александр Мальцев
        20.11.2019, 12:00
        Синтаксически всё правильно.
      2. Егор
        Егор
        18.11.2019, 18:42
        Здравствуйте, спасибо, нужно было сделать переключатель цен в таблице со скидкой и без, как раз то, что нужно.
        1. Александр Мальцев
          Александр Мальцев
          19.11.2019, 15:34
          Привет! Рад, что данный переключатель помог.
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.