Как написать самый простой скрипт степпера

В этой статье рассмотрим разработку простейшего скрипта степпера. Степпер — такой скрипт, который переключает экраны/слайды по нажатию на кнопки вперед или назад. Определения так себе, но думаю по примеру будет понятнее что это такое и для чего оно нужно.

Лично мне, приходилось раза два или три использовать примерную реализацию данного скрипта в своих работах. И подумал я, почему бы не написать нормальную заготовку для будущих подобных задач, и выложить ее в качестве статьи блога.

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

Нам понадобится:

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 дереве нашего HTML документа сам наш степпер. И далее, через функцию «find» jQuery мы будем манипулировать с шагами и событием.

Подробнее:

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

Ищем наш степер на странице.

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

Если находим, идем далее, и отслеживаем событие onclick.

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

Переменная «step», хранит название/номер шага.

Если:

if(step == 'send')
{
    alert('Здесь может быть AJAX отправка данных на сервер...');
}

в данном случае, мы можем используя аякс отправку данных, отправить данные формы на сервер. А там уже как-то обработать - сохранить в БД, передать через CURL по 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» с текущего окна. И тем самым оно пропадет (см. выше css описание).

И далее:

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

Номеру шагу указанному в step, и помещенного в дата-атрибут окна, добавляем класс «active». Тем самым отображаем окошко делая его активным.

Результат нашего творения можно найти здесь.

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

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