Опции конфигурации

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

steps

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

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

Пример:

introJs().setOptions({
  steps: [
    { 
      element: '#header', 
      intro: 'Это заголовок страницы', 
      position: 'bottom' 
    },
    { 
      element: '#menu', 
      intro: 'Меню навигации', 
      position: 'right',
      tooltipClass: 'custom-tooltip'
    },
    { 
      element: '#footer', 
      intro: 'Футер с контактами', 
      position: 'top' 
    }
  ]
}).start();

nextLabel и prevLabel

Позволяют задавать текст кнопок навигации в подсказках.

  • nextLabel — текст кнопки “Далее”.
  • prevLabel — текст кнопки “Назад”.
  • skipLabel — текст кнопки для пропуска интро.
  • doneLabel — текст кнопки для завершения.
introJs().setOptions({
  nextLabel: 'Вперед',
  prevLabel: 'Назад',
  skipLabel: 'Пропустить',
  doneLabel: 'Готово'
});

showStepNumbers

Булевый параметр, управляющий отображением номеров шагов. По умолчанию включено (true). Установка false убирает нумерацию.

introJs().setOptions({
  showStepNumbers: false
});

exitOnEsc и exitOnOverlayClick

Контролируют способ выхода из интро:

  • exitOnEsc — закрытие интро при нажатии клавиши Esc (по умолчанию true).
  • exitOnOverlayClick — закрытие интро при клике на затемненную область вокруг элемента (по умолчанию true).
introJs().setOptions({
  exitOnEsc: false,
  exitOnOverlayClick: false
});

showBullets

Управляет отображением навигационных маркеров (буллетов) для шагов. Значение true показывает маркеры, false — скрывает.

introJs().setOptions({
  showBullets: true
});

scrollToElement

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

  • true — прокрутка активна.
  • false — прокрутка отключена.
  • 'tooltip' — прокручивается так, чтобы подсказка была полностью видна.
introJs().setOptions({
  scrollToElement: 'tooltip'
});

disableInteraction

Если установлено true, пользователь не сможет взаимодействовать с элементом, на котором находится шаг интро. Полезно для блокировки кнопок или полей ввода до завершения шага.

introJs().setOptions({
  disableInteraction: true
});

keyboardNavigation

Позволяет управлять возможностью навигации между шагами с помощью клавиатуры. Значение по умолчанию — true. Если отключено, стрелки и клавиши Enter/Esc не работают для перемещения по шагам.

introJs().setOptions({
  keyboardNavigation: false
});

overlayOpacity

Задает уровень прозрачности затемненного фона. Значение от 0 (полностью прозрачный) до 1 (полностью непрозрачный). По умолчанию 0.5.

introJs().setOptions({
  overlayOpacity: 0.7
});

tooltipPosition

Можно задавать глобальное положение подсказки по умолчанию для всех шагов, если отдельные шаги не указывают position.

introJs().setOptions({
  tooltipPosition: 'right'
});

hidePrev и hideNext

Эти параметры позволяют скрывать кнопки “Назад” или “Далее” на всех шагах. Часто используется в сочетании с кастомной навигацией.

introJs().setOptions({
  hidePrev: true,
  hideNext: false
});

Пользовательские CSS-классы

  • tooltipClass — назначается на конкретный шаг или глобально через setOptions.
  • highlightClass — выделение элемента.
  • overlayClass — дополнительный класс для затемненного фона.

Пример глобальной кастомизации:

introJs().setOptions({
  tooltipClass: 'custom-tooltip',
  highlightClass: 'highlighted-element',
  overlayClass: 'dark-overlay'
});

Асинхронные функции и события

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

  • onbeforechange(function(targetElement){}) — перед сменой шага.
  • onafterchange(function(targetElement){}) — после смены шага.
  • oncomplete(function(){}) — при завершении интро.
  • onexit(function(){}) — при досрочном выходе.
introJs()
  .onbeforechange((element) => {
    console.log('Меняем шаг на:', element.id);
  })
  .oncomplete(() => {
    console.log('Интро завершено');
  })
  .start();

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

Оглавление