• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Флажки и переключатели на CSS и JavaScript (Стилизация флажков и переключателей с использованием CSS3)
Флажки и переключатели на CSS и JavaScript
Kosten
Дата: Воскресенье, 2019-02-03, 05:27 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


В представленном мануале разберем подробно один процесс, который предназначен для создания переключателя на интернет ресурсе, где используется стилистика 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>
Прикрепления: 3435499.jpg(25.7 Kb) · 9063930.png(3.1 Kb) · 7832363.png(2.0 Kb) · 3068990.png(2.4 Kb) · 2890481.png(0.8 Kb) · 8564184.png(3.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Флажки и переключатели на CSS и JavaScript (Стилизация флажков и переключателей с использованием CSS3)
  • Страница 1 из 1
  • 1
Поиск: