Навигация вперед и назад

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

Основные методы навигации

nextStep()

Метод nextStep() позволяет программно перейти к следующему шагу текущей последовательности.

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

// Переход к следующему шагу
intro.nextStep();

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

  • Если текущий шаг является последним, вызов nextStep() не приводит к ошибке, но завершает последовательность.
  • Можно использовать внутри событийного обработчика, чтобы реализовать кастомные кнопки “Далее”.

previousStep()

Метод previousStep() позволяет возвращаться к предыдущему шагу.

intro.previousStep();

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

  • Если текущий шаг является первым, вызов метода не изменяет состояние.
  • Полезно для реализации кнопок “Назад” или обратной навигации по шагам.

goToStep(stepNumber)

Метод goToStep(stepNumber) позволяет перемещаться на конкретный шаг по индексу (индексация начинается с 1).

intro.goToStep(2).start();

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

  • Подходит для динамического перехода к определенному шагу на основе условий.
  • Необходимо вызывать start() после goToStep(), если последовательность не была запущена ранее.

Пользовательские кнопки навигации

Intro.js по умолчанию предоставляет кнопки “Далее” и “Назад”. Для более гибкого управления можно создавать собственные кнопки и привязывать к ним события.

intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Первый шаг', position: 'right' },
    { element: '#step2', intro: 'Второй шаг', position: 'left' },
  ],
  showStepNumbers: true,
  showButtons: false // скрываем стандартные кнопки
});

intro.start();

document.querySelector('#custom-next').addEventListener('click', () => intro.nextStep());
document.querySelector('#custom-prev').addEventListener('click', () => intro.previousStep());

Ключевые моменты:

  • Скрытие стандартных кнопок через showButtons: false дает полный контроль над навигацией.
  • Пользовательские кнопки могут быть размещены в любом месте страницы и стилизованы под дизайн проекта.

События навигации

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

onbeforechange

Срабатывает перед изменением текущего шага.

intro.onbeforechange(function(targetElement) {
  console.log('Переход к шагу', this._currentStep + 1);
});

onafterchange

Срабатывает после отображения нового шага.

intro.onafterchange(function(targetElement) {
  console.log('Текущий шаг:', this._currentStep + 1);
});

Применение событий:

  • Можно динамически менять контент шагов.
  • Реализовать логику блокировки перехода на определенные шаги.
  • Подстраивать навигацию под состояние приложения.

Динамическая навигация

Навигация может быть адаптивной в зависимости от условий на странице:

intro.onafterchange(function() {
  if (this._currentStep === 1) {
    document.querySelector('#custom-next').style.display = 'none';
  } else {
    document.querySelector('#custom-next').style.display = 'inline-block';
  }
});

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

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

Работа с историей шагов

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

  • Прыжки на произвольный шаг через goToStep().
  • Циклическую навигацию, когда после последнего шага возвращаемся к первому.
  • Сложные сценарии с пропуском шагов на основе пользовательских условий.
intro.onbeforechange(function() {
  if (this._currentStep === 1 && someCondition) {
    this.goToStep(3);
  }
});

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

  • Всегда проверять текущий шаг перед вызовом previousStep() или nextStep() для избежания непредвиденных переходов.
  • Использовать события onbeforechange и onafterchange для интеграции логики приложения с процессом обучения.
  • Комбинировать стандартные кнопки Intro.js с кастомными элементами управления для создания интуитивной навигации.
  • Использовать goToStep() для условных или динамических маршрутов обучения, чтобы улучшить пользовательский опыт.

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

Оглавление