Порядок и нумерация шагов

Intro.js предоставляет гибкий механизм управления последовательностью шагов интерактивного руководства на веб-странице. Основная единица управления — объект step, который содержит информацию о конкретном элементе, подсказке и её положении. Правильная настройка порядка шагов обеспечивает логичное и удобное прохождение туров пользователем.

Определение шагов и их последовательность

Шаги задаются через атрибуты HTML или через JavaScript. Ключевые атрибуты для HTML:

<div data-intro="Тут объясняется кнопка отправки" data-step="1">Отправить</div>
<div data-intro="Поле для ввода имени" data-step="2">Имя</div>
<div data-intro="Поле для ввода электронной почты" data-step="3">Email</div>
  • data-step — определяет номер шага. Intro.js автоматически сортирует шаги по числовому значению.
  • data-intro — текст подсказки для соответствующего шага.

Если data-step не указан, шаги будут отображаться в порядке их появления в DOM, что может нарушить логическую последовательность.

Задание шагов через JavaScript

Для динамического управления шагами используется метод setOptions:

introJs().setOptions({
    steps: [
        {
            element: '#step1',
            intro: 'Тут объясняется кнопка отправки',
            position: 'bottom'
        },
        {
            element: '#step2',
            intro: 'Поле для ввода имени',
            position: 'right'
        },
        {
            element: '#step3',
            intro: 'Поле для ввода электронной почты',
            position: 'left'
        }
    ]
}).start();
  • element — CSS-селектор или DOM-элемент.
  • intro — текст подсказки.
  • position — позиция подсказки относительно элемента (top, right, bottom, left, auto).

Порядок элементов в массиве определяет последовательность шагов, независимо от их расположения в DOM.

Динамическое изменение порядка шагов

Intro.js позволяет изменять порядок шагов на лету с помощью методов goToStep и nextStep:

const intro = introJs();
intro.start();
intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'step2') {
        intro.goToStep(3); // Пропустить шаг 2
    }
});
  • goToStep(n) — переход к конкретному шагу по номеру.
  • nextStep() и previousStep() — перемещение вперед и назад по текущей последовательности шагов.

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

Нумерация шагов и пользовательский интерфейс

Intro.js автоматически отображает номера шагов в тултипах. Для контроля внешнего вида и нумерации доступны настройки:

introJs().setOptions({
    showStepNumbers: true, // Включение нумерации
    tooltipClass: 'custom-tooltip', // Свой CSS-класс для подсказок
    showBullets: true // Отображение списка шагов внизу
}).start();
  • showStepNumbers — включение или отключение номера текущего шага в тултипе.
  • showBullets — визуальная индикаторная линия с точками для каждого шага.

Использование кастомных CSS-классов позволяет изменять цвет, шрифт и размер нумерации, подстраивая под дизайн страницы.

Пропуск и условная активация шагов

В сложных интерфейсах часто необходимо пропускать определённые шаги. Для этого применяются функции onbeforechange или фильтрация массива шагов:

const steps = [
    { element: '#step1', intro: 'Шаг 1' },
    { element: '#step2', intro: 'Шаг 2' },
    { element: '#step3', intro: 'Шаг 3' }
];

const filteredSteps = steps.filter(step => step.element !== '#step2');

introJs().setOptions({ steps: filteredSteps }).start();
  • filter позволяет исключить шаги, которые не актуальны для текущего пользователя или состояния приложения.
  • События onbeforechange и onchange дают возможность динамически корректировать последовательность во время показа тура.

Автоматическая и ручная сортировка шагов

Intro.js использует два подхода к порядку:

  1. Сортировка по data-step — автоматическая числовая сортировка.
  2. Порядок массива в setOptions — полностью контролируется разработчиком.

Для интерфейсов с динамически создаваемыми элементами предпочтителен второй способ, так как он обеспечивает точный контроль над логикой тура.

Советы по организации шагов

  • Всегда задавать data-step или явный порядок в массиве steps.
  • Использовать onbeforechange для условного изменения маршрута.
  • Для сложных интерфейсов применять фильтрацию шагов, чтобы исключить лишние элементы.
  • Настраивать position для удобного расположения подсказок, предотвращая перекрытие контента.
  • Использовать кастомные CSS-классы для улучшения визуальной читаемости номеров и подсказок.

Правильная настройка порядка и нумерации шагов обеспечивает логичное и плавное взаимодействие пользователя с интерфейсом, делая интерактивные руководства понятными и эффективными.

Оглавление