Список всех событий Intro.js

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

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

Инициализационные события

  1. onbeforechange(targetElement) Вызывается перед переходом к следующему шагу тура.

    • targetElement – DOM-элемент, который станет активным на следующем шаге.
    • Позволяет изменить состояние элемента перед его подсветкой, динамически подгружать данные или прерывать переход, возвращая false.
    intro.onbeforechange(function(targetElement) {
    if (targetElement.id === "restricted") {
        alert("Доступ к этому шагу ограничен");
        return false; // Прерывает переход
    }
});

  2. onchange(targetElement) Вызывается после того, как текущий шаг стал активным. Используется для добавления анимаций, обновления информации в интерфейсе или выполнения действий на активном элементе.

    intro.onchange(function(targetElement) {
    console.log("Текущий шаг активирован:", targetElement.id);
});

События завершения шагов

  1. onafterchange(targetElement) Срабатывает сразу после того, как переход к шагу завершён и все анимации отображены. Отличие от onchange в том, что на этом этапе элемент уже полностью доступен для взаимодействия.

  2. onbeforeexit() Активируется перед завершением тура, вне зависимости от причины завершения (кнопка «Закрыть», Esc или завершение последнего шага). Позволяет остановить завершение, вернув false, или выполнить дополнительные проверки.

    intro.onbeforeexit(function() {
    return confirm("Вы действительно хотите завершить тур?");
});

  3. onexit() Срабатывает при окончательном завершении тура. Может использоваться для очистки ресурсов, скрытия подсказок, отправки статистики о прохождении тура.

События управления действиями пользователя

  1. oncomplete() Вызывается после успешного прохождения всех шагов тура. Отличие от onexit в том, что oncomplete активируется только при нормальном завершении всех шагов, а не при досрочном выходе.

    intro.oncomplete(function() {
    console.log("Тур успешно завершён!");
});

  2. onchangeStep(step) Более редкое событие, которое предоставляет индекс текущего шага, удобно для логирования прогресса или активации сторонних элементов интерфейса.

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

var intro = introJs();

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

intro.onbeforechange(function(targetElement) {
    console.log("Перед шагом:", targetElement.id);
});

intro.onchange(function(targetElement) {
    targetElement.style.border = "2px solid red";
});

intro.onafterchange(function(targetElement) {
    console.log("Элемент подсвечен:", targetElement.id);
});

intro.onbeforeexit(function() {
    return confirm("Закончить тур?");
});

intro.onexit(function() {
    console.log("Тур завершён");
});

intro.oncomplete(function() {
    console.log("Все шаги пройдены");
});

intro.start();

Особенности работы с событиями

  • Возврат false в обработчике onbeforechange или onbeforeexit предотвращает переход к следующему шагу или выход из тура.
  • Асинхронные действия можно реализовать через setTimeout или промисы внутри обработчиков onbeforechange и onchange.
  • Порядок вызова событий: onbeforechange → onchange → onafterchange.

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

  • Использовать onbeforechange для валидации состояния приложения перед активацией шага.
  • onchange и onafterchange подходят для визуальных эффектов и динамических модификаций контента.
  • onbeforeexit обеспечивает контроль над досрочным завершением тура.
  • oncomplete идеально подходит для сбора статистики и логирования успешного прохождения.

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

Оглавление