Методы инициализации

Intro.js предоставляет несколько способов запуска интерактивных туров на веб-странице. Методы инициализации позволяют гибко управлять поведением тура, настраивать последовательность шагов и подключать пользовательские события. Основной объект для работы — introJs(), создающий экземпляр интерактивного тура.

const tour = introJs();

После создания экземпляра можно сразу задать конфигурацию и запустить тур с помощью метода .start().

Инициализация по умолчанию

Самый простой способ — вызвать introJs() и сразу запустить тур:

introJs().start();

При этом Intro.js автоматически ищет элементы с атрибутами data-intro и data-step. Порядок шагов определяется значением data-step. Если шаги не указаны, библиотека обходит элементы в порядке появления в DOM.

Ключевые моменты:

  • data-intro — текст подсказки для шага.
  • data-step — порядковый номер шага.
  • Отсутствие data-step приводит к автоматической сортировке элементов по DOM-порядку.

Инициализация с настройкой шагов вручную

Можно задавать шаги программно, что удобно для динамического контента:

const tour = introJs();
tour.setOptions({
  steps: [
    { 
      element: document.querySelector('#step1'),
      intro: 'Это первый шаг'
    },
    { 
      element: document.querySelector('#step2'),
      intro: 'Это второй шаг'
    },
    { 
      element: '#step3',
      intro: 'Это третий шаг, с подсказкой без объекта'
    }
  ]
}).start();

Особенности:

  • Каждый шаг описывается объектом с element и intro.
  • Дополнительно можно задавать position (top, bottom, left, right, auto) для точного позиционирования подсказки.
  • В этом методе полностью контролируется последовательность шагов независимо от DOM.

Инициализация с глобальными опциями

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

introJs().setOptions({
  showStepNumbers: false,
  exitOnOverlayClick: false,
  nextLabel: 'Вперед',
  prevLabel: 'Назад',
  doneLabel: 'Готово',
  tooltipClass: 'custom-tooltip',
  highlightClass: 'custom-highlight'
}).start();

Основные опции:

  • showStepNumbers — показывать номера шагов.
  • exitOnOverlayClick — закрывать тур при клике на затемнённый фон.
  • nextLabel, prevLabel, doneLabel — текст кнопок управления.
  • tooltipClass, highlightClass — возможность применять кастомные CSS-классы.

Инициализация для элементов, добавленных динамически

Когда элементы появляются на странице после загрузки (например, через AJAX), необходимо создавать тур после их добавления:

function startDynamicTour() {
  const tour = introJs();
  tour.setOptions({
    steps: [
      { element: '#dynamic1', intro: 'Динамический элемент 1' },
      { element: '#dynamic2', intro: 'Динамический элемент 2' }
    ]
  }).start();
}

// вызов после загрузки динамического контента
loadDynamicContent().then(() => startDynamicTour());

Преимущества метода:

  • Позволяет гарантировать наличие всех элементов перед инициализацией.
  • Можно создавать разные туры для разных состояний страницы.

Использование событий при инициализации

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

const tour = introJs();

tour.onbeforechange((targetElement) => {
  console.log('Перед переходом к шагу', targetElement);
});

tour.onchange((targetElement) => {
  console.log('Сейчас показываем шаг', targetElement);
});

tour.oncomplete(() => {
  console.log('Тур завершен');
});

tour.onexit(() => {
  console.log('Тур прерван пользователем');
});

tour.start();

События:

  • onbeforechange — вызывается перед отображением следующего шага.
  • onchange — после отображения шага.
  • oncomplete — после завершения всего тура.
  • onexit — при досрочном выходе.

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

Поддержка нескольких туров на одной странице

Можно создавать несколько независимых экземпляров Intro.js для разных секций:

const tour1 = introJs('#section1');
const tour2 = introJs('#section2');

tour1.setOptions({ steps: [{ element: '#s1step1', intro: 'Первый тур, шаг 1' }] });
tour2.setOptions({ steps: [{ element: '#s2step1', intro: 'Второй тур, шаг 1' }] });

tour1.start();
// tour2.start() можно запускать позже

Преимущества:

  • Независимые настройки для разных разделов страницы.
  • Возможность запускать туры по событиям или по условию.

Использование цепочек вызовов для компактного кода

Методы .setOptions(), .onbeforechange(), .onchange() и .start() возвращают сам объект Intro.js, что позволяет писать компактные цепочки:

introJs()
  .setOptions({ steps: [{ element: '#step1', intro: 'Шаг 1' }] })
  .onchange(el => console.log('Изменился шаг', el))
  .start();

Цепочки делают код читабельным и удобным для сложных конфигураций.

Итоговая схема инициализации

  1. Создать экземпляр через introJs().
  2. Настроить шаги через атрибуты DOM или setOptions({ steps: [...] }).
  3. Настроить глобальные опции при необходимости.
  4. Привязать события для обработки шагов.
  5. Запустить тур методом .start().

Этот подход обеспечивает максимальную гибкость при построении интерактивных гидов на веб-странице.

Оглавление