Запуск тура программно

Для запуска тура программно необходимо сначала подключить библиотеку Intro.js к проекту. Обычно это делается через CDN или локальные файлы:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

После подключения библиотеку можно использовать в любом скрипте JavaScript. Основной метод для запуска тура — introJs(), который возвращает объект тура с методами конфигурации и управления.

const tour = introJs();

Определение шагов тура

Каждый шаг тура описывается с помощью метода setOptions(), который принимает объект с настройками. Основные параметры шага:

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

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

tour.setOptions({
  steps: [
    {
      element: '#header',
      intro: 'Это заголовок страницы',
      position: 'bottom'
    },
    {
      element: '#menu',
      intro: 'Здесь находится меню навигации',
      position: 'right'
    },
    {
      element: '#content',
      intro: 'Основной контент отображается здесь',
      position: 'top'
    }
  ],
  showProgress: true,
  exitOnOverlayClick: false
});

Программный запуск тура

После определения шагов, тур запускается вызовом метода start():

tour.start();

Метод start() возвращает объект тура, что позволяет сразу использовать цепочку методов для настройки или добавления событий:

introJs()
  .setOptions({ steps: [{ element: '#footer', intro: 'Это футер', position: 'top' }] })
  .start();

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

После запуска тура можно программно управлять переходом между шагами с помощью методов:

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

Пример динамического управления:

tour.start();

document.querySelector('#nextButton').addEventListener('click', () => {
  tour.nextStep();
});

document.querySelector('#prevButton').addEventListener('click', () => {
  tour.previousStep();
});

Настройка событий тура

Intro.js позволяет реагировать на жизненный цикл тура через методы onbeforechange, onafterchange, onexit и другие. Это особенно полезно для динамического обновления интерфейса или загрузки данных перед отображением подсказки.

tour.onbeforechange(function(targetElement) {
  console.log('Пользователь перешёл на элемент:', targetElement.id);
});

tour.onafterchange(function(targetElement) {
  console.log('Подсказка отображена для:', targetElement.id);
});

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

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

Шаги тура можно создавать не только заранее через setOptions, но и динамически, изменяя их во время выполнения:

const dynamicTour = introJs();
dynamicTour.setOptions({ steps: [] });

document.querySelectorAll('.feature').forEach((el, index) => {
  dynamicTour.addStep({
    element: el,
    intro: `Функция ${index + 1}`,
    position: 'bottom'
  });
});

dynamicTour.start();

Дополнительные параметры запуска

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

  • showBullets — отображение буллетов шагов.
  • showStepNumbers — отображение номеров шагов.
  • overlayOpacity — прозрачность фона.
  • scrollToElement — автоскролл к элементу шага.
  • disableInteraction — блокировка взаимодействия с элементом во время шага.

Пример с расширенными параметрами:

introJs().setOptions({
  steps: [
    { element: '#sidebar', intro: 'Боковая панель', position: 'right' }
  ],
  showBullets: false,
  showStepNumbers: true,
  overlayOpacity: 0.7,
  scrollToElement: true,
  disableInteraction: true
}).start();

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

Оглавление