Методы управления

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

const intro = introJs();

После этого объект тура предоставляет методы для настройки шагов и управления процессом:

  • setOptions(options) — задаёт конфигурацию тура. Параметр options принимает объект с ключами:

    • steps — массив шагов, каждый шаг может содержать element, intro, position, tooltipClass.
    • showStepNumbers — отображение номера шага.
    • exitOnOverlayClick — возможность выхода при клике на затемнённый фон.
    • showButtons — отображение кнопок «Next», «Back», «Skip».

  • start() — запускает тур с первого шага.

  • goToStep(stepNumber) — перемещает пользователя к указанному шагу.

  • nextStep() — переход к следующему шагу.

  • previousStep() — возврат к предыдущему шагу.

  • exit() — завершение тура в любой момент.

Пример конфигурации с несколькими шагами:

intro.setOptions({
    steps: [
        { element: '#header', intro: 'Это заголовок страницы', position: 'bottom' },
        { element: '#menu', intro: 'Навигационное меню', position: 'right' },
        { element: '#footer', intro: 'Подвал сайта', position: 'top' }
    ],
    showStepNumbers: true,
    exitOnOverlayClick: false
});
intro.start();

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

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

  • addStep(stepConfig) — добавляет шаг во время выполнения тура. Например:
intro.addStep({
    element: '#dynamic-element',
    intro: 'Новый динамический шаг',
    position: 'left'
});
  • removeStep(stepIndex) — удаляет шаг по индексу в массиве steps.
  • refresh() — пересчитывает позиции элементов, полезно при изменении DOM в ходе тура.

Навигация и события

Intro.js предоставляет удобные методы для управления навигацией и отслеживания действий пользователя:

  • onbeforechange(callback) — вызывается перед сменой шага. Параметр callback получает объект текущего шага.
  • onafterchange(callback) — вызывается после смены шага.
  • onexit(callback) — вызывается при завершении тура.
  • oncomplete(callback) — вызывается, когда пользователь прошёл все шаги.
  • onchange(callback) — вызывается при любой смене шага.

Пример использования событий:

intro.onbeforechange(function(targetElement) {
    console.log('Пользователь собирается перейти к шагу с элементом:', targetElement);
});

intro.oncomplete(function() {
    console.log('Тур завершён успешно');
});

Динамическая настройка и повторное использование

Объект тура можно конфигурировать повторно без создания нового:

intro.setOptions({ showStepNumbers: false, showButtons: true });
intro.goToStep(2).start();

Можно использовать несколько туров на одной странице, создавая отдельные объекты:

const tour1 = introJs();
const tour2 = introJs();
tour1.setOptions({ steps: [{ element: '#one', intro: 'Первый тур' }] });
tour2.setOptions({ steps: [{ element: '#two', intro: 'Второй тур' }] });
tour1.start();

Управление завершением тура

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

  • exit() — завершает тур немедленно.
  • complete() — завершает тур и инициирует событие oncomplete.
  • Проверка текущего шага: currentStep() возвращает индекс активного шага, что позволяет реализовать условное управление.

Пример:

if (intro.currentStep() === 2) {
    intro.exit();
}

Программное управление видимостью элементов

Иногда необходимо скрывать или показывать подсказки в зависимости от условий:

  • hideHint(hintId) — скрывает подсказку по идентификатору.
  • showHint(hintConfig) — отображает подсказку для элемента.
  • hideHints() — скрывает все подсказки на странице.

Пример отображения подсказки после завершения определённого шага:

intro.onafterchange(function(targetElement) {
    if (intro.currentStep() === 1) {
        intro.showHint({ element: '#menu', hint: 'Это меню!' });
    }
});

Программное управление шагами и переходами

Комбинация методов goToStep(), nextStep() и previousStep() позволяет реализовать сложную логику:

intro.onchange(function(targetElement) {
    if (targetElement.id === 'special') {
        intro.goToStep(4);
    }
});

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

Оглавление