Загрузка и использование локальных файлов

Для начала работы с библиотекой Intro.js необходимо подключить её к проекту. Библиотека предоставляет как CSS для стилизации, так и 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>

Локально:

  1. Скачать архив с официального сайта Intro.js.
  2. Разместить файлы introjs.min.css и intro.min.js в проекте.
  3. Подключить их через HTML:
<link rel="stylesheet" href="css/introjs.min.css">
<script src="js/intro.min.js"></script>

После подключения библиотека готова к использованию, и можно создавать интерактивные подсказки на странице.

Инициализация и базовое использование

Создание простого тура:

introJs().start();

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

Пример HTML-разметки:

<button data-intro="Это кнопка для запуска действия" data-step="1">Нажми меня</button>
<div data-intro="Это поле ввода" data-step="2">
    <input type="text" placeholder="Введите текст">
</div>

Ключевые атрибуты:

  • data-intro – текст подсказки.
  • data-step – порядок показа шагов.
  • data-position – позиция подсказки относительно элемента (top, right, bottom, left).

Настройка локальных файлов тура

Для более сложных сценариев удобно хранить данные о шагах в локальном JSON-файле. Это позволяет динамически загружать контент и отделять данные от кода страницы.

Пример структуры файла tour.json:

[
    {
        "element": "#btnStart",
        "intro": "Кнопка запуска процесса",
        "position": "bottom"
    },
    {
        "element": "#inputName",
        "intro": "Поле для ввода имени",
        "position": "right"
    },
    {
        "element": "#submitForm",
        "intro": "Отправка формы на сервер",
        "position": "top"
    }
]

Загрузка JSON с локального файла

Используется стандартный метод fetch для получения данных из локального файла. После загрузки массива шагов его можно передать в Intro.js через метод setOptions.

fetch('tour.json')
    .then(response => response.json())
    .then(steps => {
        introJs().setOptions({
            steps: steps
        }).start();
    })
    .catch(error => console.error('Ошибка загрузки тура:', error));

Особенности при локальном использовании:

  1. На некоторых браузерах доступ к локальным файлам через fetch заблокирован по соображениям безопасности. Рекомендуется использовать локальный сервер (Live Server в VS Code или http-server через Node.js).
  2. Все пути к элементам в element должны быть валидными селекторами CSS.
  3. JSON-файл можно разделять по модулям, например, по разным страницам или функциональным блокам.

Расширенные возможности локальных туров

Динамическая генерация шагов

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

const steps = [];
document.querySelectorAll('[data-tour]').forEach((el, index) => {
    steps.push({
        element: `#${el.id}`,
        intro: el.getAttribute('data-tour'),
        position: 'bottom',
        step: index + 1
    });
});

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

Многостраничные туры

Чтобы тур охватывал несколько страниц, локальный JSON может содержать разделение по страницам:

{
    "home": [
        {"element": "#btnHome", "intro": "Главная кнопка"}
    ],
    "profile": [
        {"element": "#inputEmail", "intro": "Поле для email"}
    ]
}

При загрузке необходимо определить текущую страницу и выбрать соответствующий массив шагов.

fetch('tour.json')
    .then(res => res.json())
    .then(data => {
        const pageSteps = data[window.location.pathname.replace('/', '')] || [];
        introJs().setOptions({ steps: pageSteps }).start();
    });

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

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

  • showStepNumbers: true|false – отображение номеров шагов.
  • exitOnOverlayClick: true|false – возможность закрытия тура кликом по затемнённой области.
  • tooltipClass: "custom-class" – добавление пользовательского CSS.
  • doneLabel, nextLabel, prevLabel – текст кнопок навигации.

Пример с кастомными настройками:

introJs().setOptions({
    steps: steps,
    showStepNumbers: false,
    exitOnOverlayClick: false,
    tooltipClass: 'my-tooltip',
    nextLabel: 'Далее',
    prevLabel: 'Назад',
    doneLabel: 'Готово'
}).start();

Работа с событиями тура

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

  • onbeforechange(element) – вызывается перед показом нового шага.
  • onchange(element) – при смене шага.
  • onafterchange(element) – после смены шага.
  • oncomplete() – после завершения тура.
  • onexit() – при преждевременном выходе.

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

introJs().onchange(function(element){
    console.log('Смена шага, элемент:', element);
}).oncomplete(function(){
    console.log('Тур завершен');
}).start();

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

Оптимизация локальных туров

  1. Минификация JSON – уменьшает размер и ускоряет загрузку.
  2. Lazy-loading шагов – для больших страниц загружать только видимые шаги.
  3. Кэширование – можно сохранять JSON в localStorage для повторного использования без загрузки с сервера.
  4. Асинхронная подгрузка элементов – использовать MutationObserver для отслеживания появления элементов перед показом шага.
const observer = new MutationObserver(() => {
    if(document.querySelector('#inputName')) {
        observer.disconnect();
        introJs().setOptions({ steps: steps }).start();
    }
});
observer.observe(document.body, { childList: true, subtree: true });

Поддержка мультиязычности

Для локальных туров можно хранить текст подсказок в JSON с ключами для разных языков:

[
    {
        "element": "#btnStart",
        "intro": {"en": "Start button", "ru": "Кнопка запуска"},
        "position": "bottom"
    }
]

Перед запуском тура выбирать нужный язык:

const lang = 'ru';
steps.forEach(step => step.intro = step.intro[lang]);
introJs().setOptions({ steps }).start();

Это позволяет использовать единый JSON для нескольких локализаций без дублирования структуры тура.

Оглавление