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

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

11.09.2021 11:28

Содержание:

Что такое переключатель
HTML разметка переключателя
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>

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

Igorrr_2022

28.04.2022, 14:11

Добрый день, имеются вложенные табы, при перезагрузке страницы все сбрасывается до таба 1-го уровня, хотелось бы чтоб при перезагрузке открывался последний таб (вложенный). Благодарю за помощь!
Вот код:

<ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link " id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link " id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> Profile </div>

        </div>
     </div>

<script>
    $(function() {
        $('[data-toggle="tab"]').on('shown.bs.tab', function () {
            window.location.hash = '_' + $(this).attr('id');
        });
        if (window.location.hash) {
            $('[id="' + window.location.hash.substr(2) + '"]').trigger('click');
        } else {
            $('[data-toggle="tab"]:first').tab('show');
        }
        $(window).on('hashchange', function() {
            $('[id="' + window.location.hash.substr(2) + '"]').trigger('click');
        });
    });
</script>

deus

14.02.2022, 17:22

Добрый день. Можете подсказать пожалуйста как сделать похожий переключатель как тут: napas-project.ru/privileges/ze
Чтобы он переключатель между такими таблицами + выбор кнопки. Благодарю.
Андрей

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
  
  Привет! Рад, что данный переключатель помог.
2. Elvis
  
  23.04.2022, 14:05
  
  Александр, здравствуйте! Спасибо за переключатель, мне тоже нужен один для смены языка на странице. Понимаю, что, скорей всего, смена языка другим способом должна быть реализована, но можете подсказать как сохранить выбранный режим после перезагрузки страницы или переходу на другую страничку внутри сайта, если использовать для этого метод переключения указанный в данной статье?
3. Александр Мальцев
  
  26.04.2022, 14:12
  
  Добрый день! Пожалуйста! Вы куда его хотите сохранить? В куки, LocalStorage и какое-то другое место?
4. Elvis
  
  27.04.2022, 12:57
  
  Тут у меня синий экран смерти в голове возник… Я вообще просто два текста в html разметке написал — один на английском, второй на русском и переключателем добавлял display none. Где это должно храниться я не думал. Но теперь догоняю, что тексту где-то надо храниться чтобы было откуда подгружать после обновления странички.