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

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

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

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

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

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

  1. bootstrap. Нам он просто облегчит подключение шрифтов и визуализацию кнопок
  2. font-awesome. От него мы получим три иконки (стрелка назад, вверх и вперед)
  3. animate.css, для простенькой анимации (вам никто не мешает использовать чистый css для этого)
  4. 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». Тем самым отображаем окошко делая его активным.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *