Минимальный пример использования

Для начала работы с 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>

Это обеспечивает доступ к объекту introJs, через который создаются и настраиваются туры по интерфейсу.

Создание минимального тура

Минимальный пример подразумевает последовательное выделение элементов страницы с краткими подсказками. Для этого необходимо добавить к элементам атрибуты data-intro и data-step:

<button data-step="1" data-intro="Это кнопка запуска действия">Запуск</button>
<p data-step="2" data-intro="Описание текстового блока">Пример текста на странице</p>

Здесь:

  • data-step — номер шага в туре. Определяет порядок отображения подсказок.
  • data-intro — текст подсказки, который будет показан пользователю.

После разметки элементов тур инициализируется с помощью вызова:

introJs().start();

Этот метод автоматически создаёт последовательность подсказок по указанным шагам.

Настройка минимального тура

Даже в минимальном варианте можно использовать базовые параметры конфигурации:

introJs().setOptions({
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    skipLabel: 'Пропустить',
    doneLabel: 'Готово'
}).start();

Параметры управления:

  • nextLabel — текст кнопки перехода к следующему шагу.
  • prevLabel — текст кнопки возврата к предыдущему шагу.
  • skipLabel — текст кнопки пропуска всего тура.
  • doneLabel — текст кнопки завершения тура.

Автоматический тур без шагов

Если не указаны шаги через data-step и data-intro, можно создавать туры программно, указывая элементы вручную:

introJs().setOptions({
    steps: [
        {
            element: document.querySelector('button'),
            intro: 'Это кнопка запуска действия'
        },
        {
            element: document.querySelector('p'),
            intro: 'Описание текстового блока'
        }
    ]
}).start();

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

Управление туром через API

Даже в минимальной конфигурации можно использовать основные методы API:

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

Пример:

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

document.getElementById('nextBtn').addEventListener('click', () => {
    tour.nextStep();
});

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

Intro.js автоматически подстраивает подсказки под размер экрана. В минимальном варианте достаточно использовать стандартные атрибуты data-intro и data-step. Для улучшения отображения на мобильных можно включить параметр:

introJs().setOptions({ 
    showStepNumbers: true,
    showBullets: true 
}).start();
  • showStepNumbers — отображает номера шагов.
  • showBullets — добавляет индикатор прогресса в виде точек.

Подключение CSS тем

Даже минимальный пример можно стилизовать через готовые темы Intro.js. Например:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/themes/introjs-modern.css">

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

Итоговая структура минимального примера

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Минимальный пример Intro.js</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
</head>
<body>

<button data-step="1" data-intro="Это кнопка запуска действия">Запуск</button>
<p data-step="2" data-intro="Описание текстового блока">Пример текста на странице</p>

<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
<script>
    introJs().setOptions({
        nextLabel: 'Далее',
        prevLabel: 'Назад',
        skipLabel: 'Пропустить',
        doneLabel: 'Готово'
    }).start();
</script>

</body>
</html>

Этот пример демонстрирует самую базовую реализацию тура с подсказками, полностью готовую к работе и расширению.

Оглавление