Структура HTML-разметки для туров

Библиотека Intro.js строится на взаимодействии с элементами DOM через определённые атрибуты и классы. Чтобы создать корректный тур, необходимо правильно оформить HTML-разметку элементов, к которым будут привязаны подсказки.

Атрибуты для элементов

Основные атрибуты, используемые в Intro.js:

  1. data-intro

    • Содержит текст подсказки, который будет отображён при активации тура.
    • Пример:
    <button data-intro="Нажмите здесь, чтобы сохранить изменения">Сохранить</button>

  2. data-step

    • Определяет порядок шагов в туре. Значение должно быть целым числом, начиная с 1.
    • Пример:
    <div data-step="1" data-intro="Это главное меню приложения">Меню</div>
<div data-step="2" data-intro="Здесь отображаются уведомления">Уведомления</div>

  3. data-position

    • Указывает позицию подсказки относительно элемента (top, bottom, left, right, auto).
    • Пример:
    <span data-intro="Иконка профиля" data-position="left">Профиль</span>

Вложенные элементы и контейнеры

Intro.js поддерживает подсказки для вложенных элементов, но важно учитывать контекст видимости:

  • Элемент должен быть видим на момент старта тура.
  • Если элемент находится в скрытом контейнере (например, внутри вкладки), необходимо открыть этот контейнер перед шагом.
  • Можно использовать коллбэки onbeforechange и onchange для управления видимостью элементов.

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

<div class="tab" id="tab1">
  <button data-step="1" data-intro="Начало работы с вкладкой 1">Вкладка 1</button>
</div>
<div class="tab" id="tab2" style="display:none;">
  <button data-step="2" data-intro="Вкладка 2 содержит дополнительные настройки">Вкладка 2</button>
</div>

Использование групп и повторяющихся элементов

Если необходимо добавить подсказки для элементов одного типа (например, список товаров):

  • Можно присваивать одинаковый класс элементам, но каждому элементу нужен уникальный data-step.
  • Для динамически создаваемых элементов можно использовать JavaScript для присвоения атрибутов после генерации DOM.

Пример:

<ul>
  <li data-step="1" data-intro="Первый товар">Товар 1</li>
  <li data-step="2" data-intro="Второй товар">Товар 2</li>
  <li data-step="3" data-intro="Третий товар">Товар 3</li>
</ul>

Интерактивные элементы

Intro.js позволяет делать подсказки для элементов форм и кнопок:

  • Для полей ввода можно указать подсказку и позицию:
<input type="text" data-step="1" data-intro="Введите ваше имя" data-position="bottom">
  • Для кнопок и ссылок рекомендуется указывать атрибут data-intro с кратким, ёмким текстом, чтобы подсказка не перекрывала важную часть интерфейса.

Специальные элементы и кастомные контейнеры

Для элементов, не являющихся стандартными HTML-тегами (например, SVG, canvas, кастомные компоненты):

  • Intro.js работает через позиционирование относительно bounding box элемента.
  • Атрибуты data-intro и data-step нужно добавлять на корневой контейнер элемента, который имеет размеры и видим на странице.

Пример с SVG:

<svg width="100" height="100" data-step="1" data-intro="Это графическое изображение">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

Совместимость с динамическим контентом

  • Для элементов, которые создаются после загрузки страницы, следует добавлять атрибуты после генерации DOM.
  • Использование методов Jav * aScript:
const newButton = document.createElement('button');
newButton.textContent = 'Новый шаг';
newButton.setAttribute('data-step', '4');
newButton.setAttribute('data-intro', 'Это новый шаг в туре');
document.body.appendChild(newButton);

Оптимизация структуры

  • Расположение data-step должно соответствовать логике интерфейса.
  • Избегать перескакивания между разделами без визуального контекста.
  • Группировать элементы в контейнеры, чтобы подсказки выглядели естественно и не перекрывали друг друга.

Эта структура HTML является фундаментальной для эффективного использования Intro.js, позволяя строить интерактивные туры с правильной последовательностью и видимой подсказкой для пользователя.

Оглавление