Управление видимостью

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

Свойство hidden

Каждый шаг может содержать ключ hidden, принимающий булево значение. Если hidden: true, шаг не будет отображаться при прохождении тура:

introJs().setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Первый шаг',
      hidden: false
    },
    {
      element: '#step2',
      intro: 'Второй шаг, который скрыт',
      hidden: true
    }
  ]
}).start();

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

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

Метод skipStep()

Для динамического управления видимостью можно использовать метод skipStep(stepNumber). Он позволяет пропустить конкретный шаг во время выполнения тура:

var intro = introJs();

intro.onbeforechange(function(targetElement) {
  if(targetElement.id === 'step2') {
    intro.skipStep(2); // Пропускаем шаг с индексом 2
  }
});

intro.start();

Особенности применения:

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

Динамическое добавление и удаление шагов

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

var intro = introJs();
intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Шаг 1' }
  ]
});

intro.start();

// Добавляем шаг динамически
intro.addStep({
  element: '#step2',
  intro: 'Динамический шаг 2'
});

// Удаляем шаг
intro.removeStep(0);

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

  • Добавленные шаги появляются только при следующем переходе к шагу.
  • Удаление шага уменьшает общий индекс шагов, поэтому последующие шаги сдвигаются.

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

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

  • onbeforechange(targetElement) — вызывается до отображения шага, позволяет изменить состояние шага или пропустить его.
  • onafterchange(targetElement) — вызывается после отображения шага, можно скрыть элемент или выполнить дополнительную анимацию.
  • onexit() — позволяет очистить динамически добавленные шаги или сбросить видимость элементов.

Пример использования события onbeforechange для динамического скрытия шагов:

introJs().onbeforechange(function(targetElement) {
  if(!document.querySelector('#step2').classList.contains('active')) {
    this.skipStep(1); // Пропуск второго шага
  }
}).start();

Использование CSS для управления видимостью элементов

Кроме встроенных методов, Intro.js позволяет контролировать видимость шагов через CSS. Элемент может быть скрыт с помощью display: none, и библиотека автоматически пропустит шаг:

#step3 {
  display: none;
}

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

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

Программное управление завершением шага

Метод exit() позволяет немедленно завершить тур, скрыв все активные подсказки. Это полезно, если определенные шаги становятся неактуальными или пользователь выполняет критические действия, требующие прекращения интерактивного руководства:

var intro = introJs();

intro.onbeforechange(function(targetElement) {
  if(targetElement.id === 'step5') {
    intro.exit(); // Завершаем тур до пятого шага
  }
});

intro.start();

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

  • Скрытие шагов через hidden предпочтительно для статических условий видимости.
  • Динамическое пропускание шагов через skipStep() и события рекомендуется использовать для адаптивных туров.
  • Контроль через CSS удобен для интеграции с уже существующей логикой интерфейса.
  • Динамическое добавление и удаление шагов позволяет строить туры, зависящие от данных, получаемых после загрузки страницы или действий пользователя.

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

Оглавление