Иногда, чтобы не писать «руководство пользователя», проще сделать небольшое «интро», своеобразный «путеводитель» по сайту. Поможет в этом хороший скрипт 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> |
Запуск тура можно сделать например так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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(); }; |
В моём случае, я предусмотрел что «если следующий слайд в меню-гамбургере, и оно скрыто, то открываем его»
