В представленном мануале разберем подробно один процесс, который предназначен для создания переключателя на интернет ресурсе, где используется стилистика CSS и JavaScript. Также рассмотрим один пример, в котором будет показано, как можно отслеживать функциональность переключателя.
Переключатель начальной загрузки - это простой компонент, который используется для активации одного из двух предопределенных параметров. Обычно используется как кнопка для включения или выключения.
Примеры использования переключателя:
1. формы;
2. Функциональность вкл / выкл;
3. Выбор предпочтений:
Также такой формат можно увидеть в различных формах, так как они очень просты в использовании и сокращают время, необходимое для заполнения всех входных данных.
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>
