Профилирование

Для начала работы с Intro.js необходимо подключить библиотеку к проекту. Существует два основных способа: через CDN или через npm.

Через CDN:

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>

Через npm:

npm install intro.js
import introJs from 'intro.js';
import 'intro.js/minified/introjs.min.css';

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

Основные понятия

Intro.js — это библиотека для создания интерактивных пошаговых подсказок на веб-страницах. Основные концепты:

  • Step (шаг) — отдельная подсказка, которая выделяет элемент на странице и показывает сообщение.
  • Tooltip (всплывающая подсказка) — блок с текстом и навигацией внутри шага.
  • Highlight (выделение) — визуальное выделение элемента, к которому привязан шаг.
  • Overlay (оверлей) — затемнённая область вокруг активного элемента для акцента внимания.

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

Простейший тур состоит из последовательности шагов:

introJs().setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Это первый шаг.'
    },
    {
      element: '#step2',
      intro: 'Это второй шаг.'
    },
    {
      element: '#step3',
      intro: 'Это третий шаг.'
    }
  ]
}).start();

Объяснение ключевых опций:

  • element — селектор DOM-элемента, к которому привязывается шаг.
  • intro — текст подсказки.
  • position — положение подсказки относительно элемента (top, left, right, bottom, auto).

Настройка навигации и внешнего вида

Intro.js позволяет изменять навигационные элементы и стиль:

introJs().setOptions({
  showStepNumbers: true,     // показывать номер шага
  showBullets: true,         // показывать индикатор прогресса
  exitOnOverlayClick: false, // запрещает закрытие по клику на оверлей
  nextLabel: 'Вперёд',       // текст кнопки "Next"
  prevLabel: 'Назад',        // текст кнопки "Back"
  skipLabel: 'Пропустить',   // текст кнопки "Skip"
  doneLabel: 'Готово'        // текст кнопки завершения
}).start();
  • showStepNumbers помогает пользователю ориентироваться в последовательности шагов.
  • exitOnOverlayClick повышает контроль над поведением тура при взаимодействии с оверлеем.

Асинхронная настройка шагов

Шаги можно формировать динамически, используя данные с сервера или события на странице:

fetch('/api/steps')
  .then(response => response.json())
  .then(steps => {
    introJs().setOptions({ steps }).start();
  });

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

События Intro.js

Intro.js предоставляет несколько важных событий, которые помогают контролировать процесс тура:

  • onbeforechange — вызывается перед переходом к следующему шагу.
  • onchange — вызывается при отображении нового шага.
  • onafterchange — после полной отрисовки шага.
  • oncomplete — после завершения всего тура.
  • onexit — если тур был прерван пользователем.

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

introJs()
  .onchange(function(targetElement) {
    console.log('Текущий элемент:', targetElement);
  })
  .oncomplete(function() {
    console.log('Тур завершён');
  })
  .start();

Работа с многими элементами и условные шаги

Можно создавать туры с условными шагами, которые отображаются только при выполнении определённого условия:

const steps = [
  { element: '#step1', intro: 'Шаг 1' },
  { element: '#step2', intro: 'Шаг 2', condition: () => user.isAdmin },
  { element: '#step3', intro: 'Шаг 3' }
];

const filteredSteps = steps.filter(step => !step.condition || step.condition());

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

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

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

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

  • Использовать опцию disableInteraction для предотвращения клика по выделенным элементам.
  • Проверять, чтобы элементы, к которым привязаны шаги, были видимы и доступными на маленьких экранах.
  • Использовать position: 'auto', чтобы подсказка автоматически располагалась в подходящем месте.

Дополнительные возможности

Интеграция с CSS-анимациями: можно задавать кастомные анимации через CSS, изменяя класс .introjs-tooltip.

Стилизация оверлея: через CSS .introjs-overlay можно менять прозрачность, цвет и добавлять переходы.

Модальные шаги: при необходимости шаг можно сделать полноэкранным, скрыв стандартные навигационные элементы.

Практические советы

  • Разбивать длинные туры на логические блоки, чтобы пользователь не перегружался информацией.
  • Всегда проверять доступность элементов перед запуском тура, иначе шаги могут быть не видны.
  • Использовать события для динамической подгрузки данных или изменения состояния страницы в процессе тура.
  • Хранить шаги в JSON-файле или базе данных для централизованного управления контентом туров.

Хотите, я могу составить подробный пример большого интерактивного тура, который объединяет все перечисленные возможности и демонстрирует сложное профилирование шагов?

Оглавление