Использование в jQuery-проектах

Для интеграции Intro.js в проект на jQuery необходимо подключить саму библиотеку и её стили. Обычно это выполняется через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

Инициализация и базовое использование

В jQuery-проектах часто применяется цепочка методов и удобные селекторы. Базовая инициализация Intro.js выглядит следующим образом:

$(document).ready(function() {
    $('#startTour').on('click', function() {
        introJs().setOptions({
            steps: [
                {
                    element: '#step1',
                    intro: 'Это первый шаг подсказки.'
                },
                {
                    element: '#step2',
                    intro: 'Второй шаг показывает другую часть интерфейса.'
                },
                {
                    element: '#step3',
                    intro: 'Последний шаг завершает тур.'
                }
            ],
            showProgress: true,
            exitOnOverlayClick: false,
            nextLabel: 'Далее',
            prevLabel: 'Назад',
            skipLabel: 'Пропустить',
            doneLabel: 'Готово'
        }).start();
    });
});

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

  • setOptions позволяет задать последовательность шагов (steps), а также параметры отображения (showProgress, exitOnOverlayClick и т.д.).
  • Каждый шаг может ссылаться на любой элемент DOM через CSS-селектор.
  • Можно управлять локализацией кнопок (nextLabel, prevLabel, skipLabel, doneLabel).

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

В jQuery-проектах часто требуется добавлять шаги в интерактивную подсказку динамически. Intro.js позволяет создавать массив шагов на лету:

$(document).ready(function() {
    $('#dynamicTour').on('click', function() {
        var steps = [];
        $('.highlight').each(function(index) {
            steps.push({
                element: this,
                intro: 'Элемент #' + (index + 1)
            });
        });

        introJs().setOptions({ steps: steps }).start();
    });
});

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

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

Использование событий Intro.js с jQuery

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

  • onbeforechange: вызывается перед переходом на шаг.
  • onchange: вызывается при отображении шага.
  • oncomplete: вызывается при завершении тура.
  • onexit: вызывается при досрочном завершении.

Пример использования с jQuery:

$(document).ready(function() {
    var tour = introJs();
    tour.setOptions({
        steps: [
            { element: '#step1', intro: 'Первый шаг' },
            { element: '#step2', intro: 'Второй шаг' }
        ]
    });

    tour.onbeforechange(function(targetElement) {
        $(targetElement).css('border', '2px solid red');
    });

    tour.onexit(function() {
        $('.highlight').css('border', 'none');
    });

    $('#startTour').click(function() {
        tour.start();
    });
});

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

  • Можно использовать jQuery для манипуляций с DOM при каждом событии.
  • Позволяет реализовать визуальные эффекты или дополнительную логику в туре.
  • События делают тур интерактивным и контекстно-зависимым.

Настройка визуальных эффектов и CSS

Intro.js позволяет менять стили подсказок через CSS. В jQuery-проектах удобно комбинировать стандартные стили с динамическими классами:

$(document).ready(function() {
    introJs().setOptions({
        steps: [
            { element: '#step1', intro: 'Шаг с кастомным классом', tooltipClass: 'custom-tooltip' }
        ]
    }).start();
});
.custom-tooltip {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    font-size: 16px !important;
    border-radius: 8px !important;
}

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

  • tooltipClass позволяет назначить индивидуальный класс для каждого шага.
  • Использование !important помогает переопределить стандартные стили Intro.js.
  • Можно анимировать подсказки с помощью CSS-переходов.

Совмещение с AJAX и динамическим контентом

В jQuery-проектах часто страницы обновляются динамически через AJAX. Intro.js поддерживает туры на динамически созданных элементах:

$.ajax({
    url: '/getDynamicContent',
    success: function(data) {
        $('#container').html(data);

        introJs().setOptions({
            steps: [
                { element: '#dynamic1', intro: 'Первый динамический элемент' },
                { element: '#dynamic2', intro: 'Второй динамический элемент' }
            ]
        }).start();
    }
});

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

  • Элементы должны существовать в DOM на момент вызова start().
  • Можно комбинировать AJAX-загрузку и динамическое формирование шагов.
  • Подходит для SPA и страниц с подгрузкой контента.

Продвинутые настройки

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

  • scrollToElement: прокрутка страницы к элементу при показе шага.
  • tooltipPosition: установка позиции подсказки (top, right, bottom, left, auto).
  • disableInteraction: блокировка взаимодействия с элементами на текущем шаге.
  • hidePrev: скрывает кнопку «Назад» на первом шаге.

Пример:

introJs().setOptions({
    steps: [
        { element: '#step1', intro: 'Первый шаг', tooltipPosition: 'right', disableInteraction: true },
        { element: '#step2', intro: 'Второй шаг', tooltipPosition: 'bottom' }
    ],
    scrollToElement: true,
    showStepNumbers: false
}).start();

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

  • Можно управлять поведением каждого шага индивидуально.
  • Позволяет создавать туры, которые интегрируются в сложный интерфейс с множеством элементов.
  • Совместно с jQuery легко реализовать условные или контекстные подсказки.
Оглавление