Запуск и остановка тура

Для создания интерактивного тура с помощью Intro.js необходимо сначала подключить библиотеку к проекту. Минимальный набор включает CSS и JS-файлы библиотеки:

<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>

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

const tour = introJs();

Добавление шагов тура

Шаги тура могут задаваться двумя способами: через HTML-атрибуты или через JavaScript-конфигурацию.

Через HTML-атрибуты:

<button data-intro="Это кнопка запуска!" data-step="1">Запустить</button>
<div data-intro="Основное поле контента" data-step="2">Контент</div>

Через JavaScript:

tour.setOptions({
  steps: [
    { 
      element: '#startBtn', 
      intro: 'Нажмите сюда для запуска', 
      position: 'right' 
    },
    { 
      element: '#content', 
      intro: 'Здесь отображается основной контент', 
      position: 'bottom' 
    }
  ]
});

В опции position можно использовать: top, left, right, bottom, auto. auto автоматически подбирает оптимальное положение подсказки.

Запуск тура

Запуск тура выполняется методом start().

tour.start();

При вызове start() библиотека начинает последовательное отображение всех шагов, учитывая их порядок и позиции.

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

introJs().setOptions({ showProgress: true }).start();

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

Пауза и возобновление Чтобы временно остановить тур, используется метод exit(), который полностью завершает текущий тур. Если требуется временная пауза с возможностью продолжить, необходимо вручную контролировать индекс шага и повторно запускать тур с start() или goToStep(n).start().

tour.exit(); // остановка
tour.goToStep(2).start(); // продолжение с конкретного шага

Переход между шагами

  • nextStep() – переход к следующему шагу.
  • previousStep() – возврат к предыдущему шагу.
  • goToStep(stepNumber) – переход к конкретному шагу по номеру.
tour.nextStep();
tour.previousStep();
tour.goToStep(3).start();

Автоматическое завершение Тур автоматически завершает работу после последнего шага. При необходимости можно подписаться на событие oncomplete для выполнения действий после окончания тура:

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

Остановка тура программно

Иногда требуется остановить тур по событию пользователя или изменению состояния страницы. Для этого используются:

  • exit() – немедленное завершение тура.
  • hideHint() – скрытие подсказки без выхода из всего тура (для отдельных шагов с подсказками).
tour.exit(); // полностью останавливает тур
tour.hideHint(); // скрывает текущую подсказку, тур продолжается

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

Настройки поведения при выходе задаются через опцию exitOnOverlayClick и exitOnEsc:

tour.setOptions({
  exitOnOverlayClick: true, // клик по затемненной области завершает тур
  exitOnEsc: true           // клавиша Esc завершает тур
});

Это позволяет гибко контролировать, каким образом пользователь может прервать интерактивный процесс.

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

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

  • onbeforechange(targetElement) – перед сменой шага.
  • onafterchange(targetElement) – после смены шага.
  • oncomplete() – после завершения тура.
  • onexit() – при остановке тура.
tour.onbeforechange(function(element) {
  console.log('Сменится шаг:', element);
});

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

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

Резюме по запуску и остановке

  • introJs() – создаёт объект тура.
  • start() – запускает тур с текущими настройками.
  • exit() – полностью останавливает тур.
  • goToStep(n).start() – позволяет продолжить тур с конкретного шага.
  • События (oncomplete, onexit, onbeforechange, onafterchange) – дают полный контроль над ходом тура.
  • Настройки (exitOnOverlayClick, exitOnEsc) – определяют, как тур реагирует на действия пользователя.

Такой подход обеспечивает полное управление интерактивными инструкциями на странице, позволяя создавать как линейные, так и динамические пользовательские туры.

Оглавление