Рубрика: WEB

Иногда, чтобы не писать «руководство пользователя», проще сделать небольшое «интро», своеобразный «путеводитель» по сайту. Поможет в этом хороший скрипт Intro.js

Текст для тура отображается в тегах вида:

				<div class="form-group w-100 mb-2" data-step="7" data-intro='Сменить пароль для входа в личный кабинет'>
				   <label for="user_password" class="mb-1 fw-bold">Пароль</label>
				   <input id="user_password" type="password" class="form-control" autocomplete="off" onkeyup="confirmNewPass();">
				</div>

Запуск тура можно сделать например так:

function GlobalTourStart(){    
    introJs().onbeforechange(function(targetElement) {
            slider=$(".sidebar")[0].getBoundingClientRect().left;
            if (slider<0) {
                if (targetElement.id=="logout_div"){
                    document.getElementById('sidebar_btn').click();
                };
            };
        }).setOptions({ 
        "showBullets": true,
        "showStepNumbers": false,
        "prevLabel":"Назад",
        "nextLabel":"Дальше",
        'doneLabel': 'Закончить', 
        'tooltipPosition': 'right',
        "onbeforechange": function(targetElement) {
            console.log(targetElement);
        }
    }).start();
};

В моём случае, я предусмотрел что «если следующий слайд в меню-гамбургере, и оно скрыто, то открываем его»