Возможность пропуска

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

Настройка кнопки пропуска

Для включения возможности пропуска используется параметр showSkipButton. Он добавляется при инициализации Intro.js:

const intro = introJs();
intro.setOptions({
    steps: [
        { element: '#step1', intro: 'Описание шага 1' },
        { element: '#step2', intro: 'Описание шага 2' }
    ],
    showSkipButton: true
});
intro.start();

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

  • showSkipButton: true автоматически добавляет кнопку Skip в интерфейс подсказки.
  • Кнопка появляется на каждом шаге, где активен тур.
  • Можно настроить текст кнопки через CSS или изменяя DOM после инициализации, так как стандартно кнопка выводится с текстом «Skip».

Обработка события пропуска

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

intro.onexit(function() {
    console.log('Пользователь пропустил тур или закрыл его');
    // Можно сохранять состояние в localStorage, чтобы не показывать тур повторно
    localStorage.setItem('introSkipped', true);
});

Особенности использования:

  • onexit вызывается и при обычном завершении тура (next до конца), и при нажатии на Skip.
  • Если нужно различать эти сценарии, можно использовать флаг внутри кода:
let skipped = false;
document.querySelector('.introjs-skipbutton').addEventListener('click', function() {
    skipped = true;
});

intro.onexit(function() {
    if (skipped) {
        console.log('Тур был пропущен');
    } else {
        console.log('Тур завершен обычным образом');
    }
});

Настройка поведения пропуска на определенных шагах

Иногда необходимо, чтобы пропуск был доступен не на всех шагах, а только на определенных. Для этого применяют параметр skipLabel и динамически управляют видимостью кнопки через CSS:

intro.setOptions({
    showSkipButton: true,
    skipLabel: 'Пропустить'
});

intro.onafterchange(function(targetElement) {
    if (targetElement.id === 'step2') {
        document.querySelector('.introjs-skipbutton').style.display = 'none';
    } else {
        document.querySelector('.introjs-skipbutton').style.display = 'inline-block';
    }
});
  • onafterchange срабатывает после смены шага.
  • Кнопка Skip скрывается на шаге 2, но видна на остальных.

Использование пропуска совместно с exitOnOverlayClick

Параметр exitOnOverlayClick позволяет пользователю закрыть тур кликом по затемненной области вне элементов. Его можно комбинировать с showSkipButton:

intro.setOptions({
    showSkipButton: true,
    exitOnOverlayClick: true
});
  • Клик по оверлею при активной опции exitOnOverlayClick срабатывает аналогично нажатию Skip.
  • В onexit можно обработать оба случая единообразно.

Сохранение состояния пропуска

Для предотвращения повторного отображения тура после пропуска используют localStorage или cookies:

if (!localStorage.getItem('tourSkipped')) {
    intro.start();
}

intro.onexit(function() {
    localStorage.setItem('tourSkipped', true);
});

Важные моменты:

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

Программный пропуск тура

Intro.js позволяет пропустить тур через программный вызов метода exit():

const intro = introJs();
intro.start();

// Программный пропуск через 5 секунд
setTimeout(function() {
    intro.exit();
}, 5000);
  • Используется для автоматического завершения или пропуска интерактивных туров.
  • onexit сработает аналогично ручному нажатию кнопки Skip.

Итоговые рекомендации по использованию возможности пропуска

  1. Всегда предоставлять пользователю контроль — кнопка Skip улучшает UX, особенно для опытных пользователей.
  2. Обрабатывать событие onexit для сохранения состояния и предотвращения повторного отображения.
  3. Гибко управлять доступностью кнопки на определенных шагах с помощью onafterchange и CSS.
  4. Комбинировать с exitOnOverlayClick для естественного поведения при клике вне элементов.
  5. Использовать программное завершение через exit() для сценариев автоматического пропуска.

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

Оглавление