Программное создание шагов

Для программного создания шагов в Intro.js используется метод setOptions или объект конфигурации при вызове start(). Каждый шаг описывается объектом с ключевыми параметрами:

const intro = introJs();

intro.setOptions({
    steps: [
        {
            element: '#first-element',
            intro: 'Это первый шаг интерактивного руководства.',
            position: 'bottom'
        },
        {
            element: '#second-element',
            intro: 'Второй шаг с дополнительной информацией.',
            position: 'right'
        }
    ],
    showBullets: true,
    showStepNumbers: true
});

intro.start();

Ключевые свойства шагов:

  • element — CSS-селектор или DOM-элемент, к которому привязывается подсказка. Если параметр не задан, шаг отображается в центре экрана.
  • intro — текст подсказки.
  • position — положение подсказки относительно элемента (top, right, bottom, left, auto).
  • tooltipClass — дополнительный CSS-класс для оформления конкретного шага.
  • disableInteraction — если true, элемент не кликабельный во время показа шага.

Динамическое добавление шагов

Шаги можно создавать программно без статической конфигурации, используя метод addStep:

intro.addStep({
    element: document.querySelector('#dynamic-step'),
    intro: 'Этот шаг был добавлен динамически',
    position: 'left'
});

intro.start();

Метод addStep полезен для случаев, когда шаги зависят от состояния страницы или пользовательских действий.

Управление порядком и условными шагами

Порядок шагов в Intro.js определяется массивом steps, но его можно менять динамически с помощью событий и методов API:

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'conditional-step') {
        intro.nextStep(); // пропуск шагов по условию
    }
});

Также возможно создавать условные шаги, основываясь на состоянии интерфейса:

const steps = [
    { element: '#step1', intro: 'Шаг 1', position: 'bottom' }
];

if (userLoggedIn) {
    steps.push({ element: '#step2', intro: 'Шаг только для авторизованных', position: 'right' });
}

intro.setOptions({ steps });
intro.start();

Настройка переходов и интерактивных действий

Intro.js позволяет управлять навигацией шагов через API:

  • nextStep() — перейти к следующему шагу.
  • previousStep() — перейти к предыдущему.
  • goToStep(stepNumber) — перейти к конкретному шагу (номер шага начинается с 1).
  • exit() — завершить руководство.

Пример с программным управлением:

intro.onafterchange(function(targetElement) {
    if (targetElement.id === 'special-step') {
        // Автоматический переход через 2 секунды
        setTimeout(() => intro.nextStep(), 2000);
    }
});

Управление контентом шагов на лету

Содержание подсказки можно изменять динамически с помощью метода setOptions в процессе показа:

intro.onbeforechange(function(targetElement) {
    if (targetElement.id === 'update-text') {
        intro.setOptions({
            steps: [
                {
                    element: '#update-text',
                    intro: 'Текст обновлён динамически',
                    position: 'top'
                }
            ]
        });
    }
});

Продвинутая стилизация шагов

Каждый шаг можно индивидуально оформлять:

  • tooltipClass — добавляет CSS-класс к конкретной подсказке.
  • Глобальные классы через setOptions({ tooltipClass: 'custom-tooltip' }).
  • Использование highlightClass для подсветки элемента.

Пример:

intro.setOptions({
    steps: [
        {
            element: '#highlighted',
            intro: 'Подсвеченный элемент',
            position: 'right',
            highlightClass: 'custom-highlight',
            tooltipClass: 'custom-tooltip'
        }
    ]
});

События при программном управлении шагами

Intro.js поддерживает следующие события:

  • onbeforechange(targetElement) — перед отображением нового шага.
  • onafterchange(targetElement) — после отображения шага.
  • oncomplete() — после завершения всех шагов.
  • onexit() — при досрочном завершении.

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

Программное управление шагами на больших интерфейсах

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

  1. Сбор DOM-элементов после полной загрузки страницы.
  2. Создание массива шагов с актуальными элементами.
  3. Инициализация Intro.js через setOptions.
  4. Обработка событий onbeforechange и onafterchange для адаптивной логики.
document.addEventListener('DOMContentLoaded', () => {
    const steps = Array.from(document.querySelectorAll('.feature')).map((el, index) => ({
        element: el,
        intro: `Функция ${index + 1}`,
        position: 'bottom'
    }));

    const intro = introJs();
    intro.setOptions({ steps });
    intro.start();
});

Такой подход обеспечивает полную гибкость в создании шагов и их последовательности.

Оглавление