Як написати найпростіший скрипт степера

У цій статті розглянемо розробку найпростішого скрипта степера. Степер — це такий скрипт, який перемикає екрани/слайди при натисканні кнопок «вперед» або «назад». Визначення не найкраще, але думаю, приклад пояснить, що це таке і навіщо воно потрібно.

Особисто мені кілька разів доводилось реалізовувати подібний скрипт у своїх проектах. І я подумав: чому б не зробити зручну заготовку для майбутніх задач і не поділитися нею у блозі.

Підключаємо бібліотеки

Нам знадобляться:

Bootstrap — для зручного підключення шрифтів та стилізації кнопок
Font Awesome — для використання трьох іконок (стрілка назад, вгору та вперед)
Animate.css — для простої анімації (нічого не заважає використовувати чистий CSS)
jQuery — так, вже час відмовлятись і ловити події на чистому JS, але поки що так зручніше 🙂

А виглядає це так:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

HTML-код кроків

Усього буде чотири кроки. На третьому з’явиться можливість перейти одразу до першого.

<div class="stepper-list" data-stepper="some-name">
    <div class="stepper-one active animated" data-step="1">
        <div class="stepper__content">
            Шаг 1
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="2">Вперед <i class="fas fa-chevron-circle-right"></i></button>
        </div>
    </div>
    <div class="stepper-one animated" data-step="2">
        <div class="stepper__content">
            Шаг 2
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="1"><i class="fas fa-chevron-circle-left"></i> Назад</button>
            <button type="button" class="btn btn-success" data-to-step="3">Вперед <i class="fas fa-chevron-circle-right"></i></button>
        </div>
    </div>
    <div class="stepper-one animated" data-step="3">
        <div class="stepper__content">
            Шаг 3
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="2"><i class="fas fa-chevron-circle-left"></i> Назад</button>
            <button type="button" class="btn btn-success" data-to-step="1">К шагу 1 <i class="fas fa-chevron-circle-up"></i></button>
            <button type="button" class="btn btn-success" data-to-step="4">Вперед <i class="fas fa-chevron-circle-right"></i></button>
        </div>
    </div>
    <div class="stepper-one animated" data-step="4">
        <div class="stepper__content">
            Шаг 4
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="3"><i class="fas fa-chevron-circle-left"></i> Назад</button>
            <button type="button" class="btn btn-success" data-to-step="send">Отправить <i class="fas fa-envelope"></i></button>
        </div>
    </div>
</div>

На що варто звернути увагу:

data-stepper="some-name" — атрибут у батьківському елементі всіх кроків. Його значення (тобто "some-name") — це і є назва степера. Це дозволяє використовувати кілька компонентів степера на одній сторінці.

HTML одного кроку виглядає так:

<div class="stepper-one animated" data-step="2">
    <div class="stepper__content">
        Шаг 2
    </div>
    <div class="stepper__nav">
        <button type="button" class="btn btn-success" data-to-step="1"><i class="fas fa-chevron-circle-left"></i> Назад</button>
        <button type="button" class="btn btn-success" data-to-step="3">Вперед <i class="fas fa-chevron-circle-right"></i></button>
    </div>
</div>

де:
data-step="2" — атрибут з номером поточного кроку
data-to-step="1" і data-to-step="3" — вказують, на який крок слід перейти при натисканні кнопки. Вміст атрибутів повинен збігатися зі значеннями data-step відповідних блоків.

CSS-код кроків

Тут усе досить просто і без зайвих дизайнерських деталей (адже це лише заготовка):

.stepper-one:not(.active) {
    display: none;
}
.stepper__content {
    text-align: center;
    margin: 10px;
    padding: 50px 0;
    border: 1px dotted #47484B;
}
.stepper__nav {
    text-align: center;
}
.stepper__nav button {
    text-transform: uppercase;
}

Особливу увагу зверніть на:

.stepper-one:not(.active) {
    display: none;
}

Тут ми приховуємо всі кроки, окрім активного (той, що має клас active). Це необхідно, щоб одночасно був показаний лише один крок.

JavaScript-код степера

Як і в попередній статті про таби, цей степер обгорнуто у функцію, щоб мати змогу створювати кілька незалежних екземплярів на одній сторінці.

jQuery(document).ready(function()
{
    function stepper(id)
    {
        var $Stepper = jQuery('[data-stepper="' + id + '"]');

		if($Stepper.length)
		{
			$Stepper.find('[data-to-step]').click(function(e){
	            e.preventDefault();

	            var step = jQuery(this).data('to-step');
	            
	            if(step == 'send')
	            {
	                alert('Тут може бути AJAX відправлення даних на сервер...');
	            }
	            else
	            {
					if($Stepper.find('.stepper-one').hasClass('bounceInRight') == false)
					{
						$Stepper.find('.stepper-one').addClass('bounceInRight');
					}
	                $Stepper.find('.stepper-one').removeClass('active');
	                $Stepper.find('[data-step="' + step + '"]').addClass('active');   
	            }
	        });
		}
    }
    
    stepper('some-name');
});

Функція stepper(...) приймає один аргумент — назву степера. Вона знаходить потрібний компонент у DOM і далі керує переходами між кроками за допомогою jQuery.

Докладніше:

$Stepper = jQuery('[data-stepper="' + id + '"]');

Шукаємо степер на сторінці.

if($Stepper.length) {...}

Якщо знайдено — відслідковуємо подію onclick.

var step = jQuery(this).data('to-step');

Змінна step зберігає номер або назву кроку.

if(step == 'send')
{
    alert('Тут може бути AJAX відправлення даних на сервер...');
}

У цьому місці можна викликати AJAX-запит для надсилання даних на сервер, обробки, збереження в БД або передачі через API.

Інакше — перемикаємо кроки:

if($Stepper.find('.stepper-one').hasClass('bounceInRight') == false)
{
	$Stepper.find('.stepper-one').addClass('bounceInRight');
}
$Stepper.find('.stepper-one').removeClass('active');
$Stepper.find('[data-step="' + step + '"]').addClass('active');

Умова вище захищає від повторного додавання класу, якщо користувач повернувся назад, а потім знову пішов вперед.

$Stepper.find('.stepper-one').removeClass('active');

Видаляємо клас active з усіх кроків.

$Stepper.find('[data-step="' + step + '"]').addClass('active');

Додаємо клас active лише тому блоку, чий data-step збігається з обраним значенням.

Результат роботи можна переглянути тут.

2018-12-29 Pavel Web CSS, HTML, JavaScript, jQuery КоментаріНемає Коментарів

З вашим WordPress сайтом проблеми? потрібний додатковий функціонал? нестандартний плагін чи згорнути нову сторінку?
Тоді напишіть мені через форму зворотного зв'язку, і я намагатимусь вам допомогти.