API методы библиотеки

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

Инициализация

Для запуска интерактивного руководства используется метод introJs():

const intro = introJs();

Он возвращает объект, содержащий все доступные методы API. Важный момент: каждый вызов introJs() создаёт новый экземпляр, что позволяет запускать несколько независимых туров на одной странице.

Настройка шагов

Метод setOptions(options) задаёт глобальные настройки интро. Параметр options — объект с ключами, среди которых:

  • steps — массив шагов, каждый шаг — объект вида:

    {
    element: '#elementId', // CSS-селектор элемента
    intro: 'Текст подсказки',
    position: 'top' // top, right, bottom, left
}

  • showBullets — отображение точек навигации (true/false)

  • showStepNumbers — нумерация шагов (true/false)

  • exitOnOverlayClick — закрытие при клике по затемнению (true/false)

  • keyboardNavigation — управление с клавиатуры (true/false)

  • tooltipClass — пользовательский CSS-класс для тултипа

Пример:

intro.setOptions({
    steps: [
        { element: '#header', intro: 'Это заголовок сайта', position: 'bottom' },
        { element: '#menu', intro: 'Это меню навигации', position: 'right' }
    ],
    showBullets: true,
    exitOnOverlayClick: false
});

Управление интро

После настройки шагов интро запускается методом start():

intro.start();

Методы управления прогрессом:

  • nextStep() — переход к следующему шагу.

  • previousStep() — возврат к предыдущему шагу.

  • goToStep(step) — переход на указанный шаг (номер или элемент):

    intro.goToStep(3).start();

  • exit() — завершение интро, скрытие всех подсказок.

  • refresh() — пересчёт позиции тултипов, полезно при динамическом изменении DOM.

События

Intro.js предоставляет возможность отслеживать жизненный цикл интро через события:

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

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

intro.onchange(function(targetElement) {
    console.log('Смена шага, элемент:', targetElement);
});

intro.oncomplete(function() {
    alert('Интро завершено!');
});

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

Шаги можно добавлять не только через setOptions, но и динамически:

intro.addStep({
    element: '#footer',
    intro: 'Это нижний колонтитул',
    position: 'top'
});

Метод addStep() позволяет гибко строить тур в зависимости от условий на странице.

Прочие полезные методы

  • currentStep() — возвращает номер текущего шага.
  • hideHint() / showHint() — управление подсказками для элементов.
  • refreshHints() — обновление позиции всех подсказок после изменения DOM.
  • exitTo(step) — завершение интро с автоматическим переходом к определённому шагу.

Настройка подсказок

Методы addHints() и showHints() позволяют создавать подсказки вне основного интро. Подсказки привязаны к элементам и могут быть интерактивными:

intro.addHints();
intro.showHints();

Каждая подсказка настраивается через data-hint и data-hint-position в HTML:

<button id="saveBtn" data-hint="Сохранить изменения" data-hint-position="right">Сохранить</button>

Совместное использование шагов и подсказок

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

  • Методы подсказок (showHints, hideHint) не влияют на активное интро.
  • Шаги интро всегда имеют приоритет над подсказками при отображении на одном элементе.

Резюме по методам

Метод Описание
introJs() Создаёт новый экземпляр интро
setOptions(options) Настройка шагов и глобальных параметров
start() Запуск интро
nextStep() Следующий шаг
previousStep() Предыдущий шаг
goToStep(step) Переход к указанному шагу
exit() Завершение интро
refresh() Пересчёт позиции тултипов
addStep(step) Динамическое добавление шага
onchange(callback) Событие при смене шага
oncomplete(callback) Событие завершения интро
addHints() Добавление подсказок
showHints() Отображение подсказок
hideHint(element) Скрытие конкретной подсказки
refreshHints() Обновление позиции подсказок после изменения DOM

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

Оглавление