Определение шагов через HTML-атрибуты

Библиотека Intro.js позволяет создавать интерактивные пошаговые руководства по интерфейсу веб-приложений. Одним из самых удобных способов задания шагов является использование HTML-атрибутов, что позволяет описывать шаги прямо в разметке, без необходимости писать сложный JavaScript-код.

Основные атрибуты

Для определения шагов используются следующие атрибуты:

  1. data-intro Содержит текст подсказки, который будет отображаться пользователю на данном шаге. Пример:

    <button data-intro="Нажмите эту кнопку, чтобы добавить новый элемент">Добавить</button>

  2. data-step Определяет порядок следования шагов. Значение должно быть числовым, начиная с 1. Если шагов несколько, порядок определяется именно этим атрибутом. Пример:

    <div data-step="1" data-intro="Первый шаг руководства">Элемент 1</div>
<div data-step="2" data-intro="Второй шаг руководства">Элемент 2</div>

  3. data-position Определяет расположение подсказки относительно элемента: top, left, right, bottom, auto. Атрибут помогает избежать перекрытия других элементов и улучшает визуальное восприятие. Пример:

    <span data-step="3" data-intro="Подсказка снизу" data-position="bottom">Подсказка</span>

Автоматическая инициализация

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

introJs().start();

При этом не требуется явно указывать шаги в JavaScript — библиотека формирует последовательность из всех элементов с data-intro, сортируя их по data-step.

Комбинирование с кастомными настройками

HTML-атрибуты удобно комбинировать с методами Intro.js:

  • setOptions(options) позволяет задать общие параметры для всех шагов, такие как кнопки, стиль, задержки.
  • Пример:
introJs().setOptions({
    showBullets: true,
    exitOnOverlayClick: false
}).start();

Даже если шаги определены через HTML, параметры из setOptions применяются глобально.

Использование нескольких подсказок на одном элементе

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

<div>
    <button data-step="1" data-intro="Первое пояснение кнопки">Кнопка</button>
    <button data-step="4" data-intro="Позднее пояснение той же кнопки">Кнопка</button>
</div>

Библиотека корректно обрабатывает дубли и отображает подсказки по порядку шагов.

Использование HTML-атрибутов с динамическими элементами

Если элементы создаются динамически через JavaScript, атрибуты можно добавлять программно:

let newButton = document.createElement('button');
newButton.innerText = "Новый элемент";
newButton.setAttribute('data-step', '5');
newButton.setAttribute('data-intro', 'Это динамический шаг');
document.body.appendChild(newButton);

После этого вызов introJs().start() учтет динамически созданный элемент в последовательности шагов.

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

HTML-атрибуты удобно использовать для локализации, если текст подсказок хранится в HTML или в атрибутах через серверный шаблонизатор:

<button data-step="1" data-intro="{{ t('button.add') }}">Добавить</button>

Таким образом, контент подсказок может подстраиваться под язык пользователя без изменений JavaScript-кода.

Практические рекомендации

  • Нумерация шагов: всегда использовать последовательные числа для data-step, чтобы избежать неправильного порядка.
  • Позиционирование подсказок: использовать data-position для элементов, близких к краям экрана, чтобы подсказки не выходили за границы окна.
  • Минимизация Jav * aScript: HTML-атрибуты позволяют описывать большинство сценариев без ручного объявления шагов, упрощая поддержку.
  • Адаптивность: проверять отображение подсказок на мобильных устройствах; иногда стоит использовать data-position="auto" для корректного позиционирования.

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

Оглавление