Атрибуты data-intro и data-step

Библиотека Intro.js предоставляет мощный и гибкий инструмент для создания интерактивных пошаговых руководств по веб-страницам. Центральным элементом управления шагами является использование HTML-атрибутов data-intro и data-step, которые позволяют определить содержимое подсказки и порядок её отображения.

Атрибут data-intro

Атрибут data-intro отвечает за текст, который будет отображаться в подсказке для конкретного элемента страницы. Его значение может содержать строку с произвольным текстом, включая HTML-теги для форматирования.

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

<button data-intro="Это кнопка отправки формы">Отправить</button>

Ключевые особенности:

  • Поддержка HTML: можно использовать теги <b>, <i>, <br> для форматирования текста.

    <div data-intro="<b>Важная секция</b><br>Обратите внимание на детали">
  Контент
</div>

  • Локализация: текст подсказки может быть на любом языке, что позволяет создавать мультиязычные интерфейсы.

  • Динамическое изменение: значение data-intro можно изменять через JavaScript перед запуском интро, что полезно для персонализированных подсказок.

    document.querySelector('#myElement').setAttribute('data-intro', 'Новый текст подсказки');

Атрибут data-step

Атрибут data-step определяет порядок шагов в интерактивном руководстве. Это число, которое указывает, на каком шаге появится подсказка для данного элемента.

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

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

Особенности:

  • Порядок следования: Intro.js сортирует элементы по возрастанию data-step. Если этот атрибут пропущен, элемент может быть проигнорирован в стандартной последовательности.

  • Гибкость: номера шагов могут быть не последовательными, например 1, 3, 7. Библиотека корректно упорядочит их по числовому значению.

  • Динамическое добавление шагов: можно программно добавлять шаги к элементам, меняя атрибуты до вызова introJs().start().

Совмещение data-intro и data-step

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

<section data-step="1" data-intro="Добро пожаловать на главную страницу">
  Главная
</section>

<section data-step="2" data-intro="Здесь находится меню навигации">
  Меню
</section>

<section data-step="3" data-intro="Основной контент">
  Контент
</section>
  • data-step задаёт позицию шага в последовательности.
  • data-intro задаёт текст подсказки для этого шага.

Динамическое управление атрибутами через JavaScript

Intro.js позволяет полностью управлять шагами через скрипт, что важно для страниц с динамическим контентом:

const steps = [
  { element: '#header', intro: 'Это заголовок страницы' },
  { element: '#nav', intro: 'Меню навигации' },
  { element: '#footer', intro: 'Подвал сайта' }
];

steps.forEach((step, index) => {
  const el = document.querySelector(step.element);
  el.setAttribute('data-step', index + 1);
  el.setAttribute('data-intro', step.intro);
});

introJs().start();

Преимущества подхода:

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

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

  1. HTML и мультимедиа внутри подсказки:
<div data-step="1" data-intro='<h3>Заголовок</h3><p>Описание с <b>жирным</b> текстом и изображением:</p><img src="icon.png">' >
  Контент
</div>
  1. Стилизация подсказок через CSS:

Intro.js применяет класс introjs-tooltip, который можно модифицировать:

.introjs-tooltip {
  background-color: #333;
  color: #fff;
  font-size: 16px;
}
  1. Пропуск шагов:

Если data-step не указан для элемента, он не будет участвовать в последовательности, что позволяет гибко управлять набором шагов без удаления HTML.

Использование data-intro и data-step обеспечивает максимальную простоту при создании пошаговых подсказок и позволяет масштабировать интерактивные руководства на больших страницах с множеством элементов. Эти атрибуты служат фундаментом для всех продвинутых функций Intro.js: динамического управления шагами, кастомных стилей и мультимедийного контента.

Оглавление