Инструменты разработчика

Для использования Intro.js необходимо сначала подключить библиотеку к проекту. Библиотека распространяется через CDN и npm.

Через 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>

Через npm:

npm install intro.js

После установки можно импортировать библиотеку в проект:

import introJs from 'intro.js';
import 'intro.js/minified/introjs.min.css';

Инициализация и запуск туров

Для запуска базового интерактивного тура используется объект introJs():

const tour = introJs();
tour.start();

По умолчанию Intro.js выделяет элементы страницы по атрибуту data-intro, который содержит текст подсказки.

<button data-intro="Нажмите здесь, чтобы открыть меню">Меню</button>

Настройка шагов тура

Intro.js поддерживает два подхода к определению шагов: автоматическое через HTML-атрибуты и ручное через JavaScript.

Автоматическое определение через атрибуты

Каждый шаг задается через атрибуты data-intro и data-step:

<div data-step="1" data-intro="Первый шаг"></div>
<div data-step="2" data-intro="Второй шаг"></div>

Библиотека сама определяет порядок шагов по значению data-step.

Ручная конфигурация шагов

Можно создавать тур полностью через объект Jav * aScript:

introJs().setOptions({
  steps: [
    { 
      element: '#step1', 
      intro: 'Описание первого шага', 
      position: 'right'
    },
    { 
      element: '#step2', 
      intro: 'Описание второго шага', 
      position: 'bottom' 
    }
  ],
  showStepNumbers: true,
  exitOnOverlayClick: false
}).start();

Ключевые параметры шагов:

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

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

Общие параметры

  • showStepNumbers — отображение номеров шагов.
  • showBullets — отображение навигационных точек внизу подсказки.
  • exitOnEsc — закрытие тура при нажатии клавиши Esc.
  • exitOnOverlayClick — закрытие тура при клике на затемнённый фон.
  • scrollToElement — автоматическая прокрутка страницы к выделенному элементу.

Настройка навигации

Intro.js поддерживает кнопки Next, Back и Done. Их текст можно изменить:

introJs().setOptions({
  nextLabel: 'Далее',
  prevLabel: 'Назад',
  doneLabel: 'Закрыть'
});

Также можно полностью скрыть кнопки или создавать собственные элементы управления через события.

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

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

  • onbeforechange(targetElement) — вызывается перед изменением шага.
  • onchange(targetElement) — после смены шага.
  • oncomplete() — когда пользователь завершил тур.
  • onexit() — при досрочном закрытии тура.
  • onafterchange(targetElement) — после анимации перехода к шагу.

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

introJs()
  .onchange(function(element) {
    console.log('Текущий шаг:', element);
  })
  .oncomplete(function() {
    console.log('Тур завершён');
  })
  .start();

Динамическое управление шагами

Шаги тура можно изменять в процессе выполнения:

const tour = introJs();
tour.setOptions({
  steps: [
    { element: '#step1', intro: 'Первый шаг' }
  ]
});

tour.start();

// Добавление шага динамически
tour.addStep({
  element: '#step2',
  intro: 'Второй шаг'
});

Кастомизация внешнего вида

Intro.js использует CSS для визуализации подсказок и оверлея. Возможности кастомизации:

  • tooltipClass — применяет CSS-класс к подсказке.
  • Переопределение стилей оверлея (.introjs-overlay) и подсказки (.introjs-tooltip).
  • Анимация появления с помощью transition и opacity.

Пример кастомного CSS:

.introjs-tooltip.custom-tooltip {
  background-color: #222;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
}

.introjs-tooltip-arrow {
  border-color: #222;
}

Интеграция с фреймворками

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

  • React — оборачивается в компонент, шаги можно хранить в состоянии.
  • Vue.js — подключение через директивы и динамическое изменение шагов через v-if.
  • Angular — использование сервиса для управления турами и подписки на события.

Пример для React:

import React, { useEffect } from 'react';
import introJs from 'intro.js';
import 'intro.js/minified/introjs.min.css';

function AppTour() {
  useEffect(() => {
    introJs().start();
  }, []);

  return (
    <div>
      <button data-step="1" data-intro="Нажмите, чтобы открыть меню">Меню</button>
    </div>
  );
}

Продвинутые возможности

Условные шаги

Можно показывать шаги только при определённых условиях:

const steps = [
  { element: '#step1', intro: 'Шаг 1' },
  { 
    element: '#step2', 
    intro: 'Шаг 2', 
    // шаг будет пропущен, если условие false
    skip: () => !user.isAdmin
  }
];

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

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

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

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

document.querySelector('#startSettingsTour').addEventListener('click', () => tourSettings.start());
document.querySelector('#startFeaturesTour').addEventListener('click', () => tourFeatures.start());

Локализация

Intro.js поддерживает перевод текста кнопок и шагов:

introJs().setOptions({
  nextLabel: 'Следующий',
  prevLabel: 'Предыдущий',
  doneLabel: 'Готово'
});

Текст подсказок также можно динамически изменять на основе языка пользователя.

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

Оглавление