Персонализация контента

В библиотеке Intro.js каждый шаг интерактивного руководства определяется объектом с набором свойств. Основные свойства шагов включают:

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

Пример конфигурации:

introJs().setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Это главное меню приложения',
      position: 'right'
    },
    {
      element: '#search',
      intro: 'Поле поиска позволяет находить нужные данные',
      position: 'bottom',
      tooltipClass: 'custom-tooltip'
    }
  ]
}).start();

Динамическое создание контента

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

introJs().setOptions({
  steps: [
    {
      element: '#status',
      intro: () => {
        const onl ine = document.querySelector('#status').dataset.online;
        return onl ine === 'true' ? 'Вы онлайн' : 'Вы офлайн';
      },
      position: 'bottom'
    }
  ]
}).start();

Использование функций позволяет адаптировать подсказки к текущему состоянию интерфейса.

Персонализация через классы и стили

Intro.js поддерживает детальную кастомизацию внешнего вида подсказок:

  • tooltipClass и highlightClass позволяют задавать отдельные стили для каждого шага.
  • Глобальные изменения можно применять через CSS-селекторы .introjs-tooltip, .introjs-helperLayer, .introjs-overlay.

Пример добавления кастомной стрелки и фона подсказки:

.custom-tooltip {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-radius: 10px;
  font-size: 14px;
}

.custom-tooltip .introjs-arrow {
  border-color: #2c3e50;
}

Интернационализация и локализация

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

introJs().setOptions({
  nextLabel: 'Далее',
  prevLabel: 'Назад',
  skipLabel: 'Пропустить',
  doneLabel: 'Готово'
});

Для многоязычных приложений можно динамически подставлять тексты на основе текущего языка пользователя.

Вставка HTML и медиа

Подсказки Intro.js поддерживают HTML-контент, что позволяет включать ссылки, изображения и кнопки:

introJs().setOptions({
  steps: [
    {
      element: '#help',
      intro: '<p>Нажмите <a href="/faq">сюда</a>, чтобы узнать больше</p>',
      position: 'right'
    },
    {
      element: '#video',
      intro: '<video src="intro.mp4" controls width="250"></video>',
      position: 'bottom'
    }
  ]
});

Использование HTML открывает возможности для создания более насыщенного и интерактивного контента, чем простой текст.

Условные шаги

Можно управлять тем, какие шаги показывать, на основе условий:

const steps = [
  { element: '#menu', intro: 'Меню', position: 'right' },
  { element: '#adminPanel', intro: 'Панель администратора', position: 'bottom', show: user.isAdmin }
];

introJs().setOptions({ steps: steps.filter(step => step.show !== false) }).start();

Такой подход обеспечивает персонализацию контента под разные роли пользователей.

Анимации и временные задержки

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

introJs().onafterchange(function(targetElement) {
  setTimeout(() => {
    targetElement.style.transform = 'scale(1.05)';
  }, 300);
});

Использование событий onbeforechange, onafterchange, oncomplete и onexit дает возможность создавать интерактивные и динамичные подсказки, реагирующие на действия пользователя.

Пользовательские элементы управления

Кнопки по умолчанию можно скрывать и создавать собственные элементы управления:

introJs().setOptions({
  showButtons: false
}).start();

document.querySelector('#customNext').addEventListener('click', () => {
  introJs().nextStep();
});

Такой метод позволяет полностью адаптировать навигацию по шагам под интерфейс приложения.

Поддержка адаптивности

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

introJs().setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Меню приложения',
      position: window.innerWidth < 768 ? 'bottom' : 'right'
    }
  ]
});

Это обеспечивает корректное отображение на мобильных устройствах и разных разрешениях экрана.

Итоговые возможности персонализации

  • Динамический и условный контент.
  • Кастомные стили и CSS-классы.
  • Поддержка HTML, медиа и интерактивных элементов.
  • Локализация интерфейса.
  • Пользовательские элементы управления и анимации.
  • Адаптация под мобильные устройства.

Эти возможности делают Intro.js гибким инструментом для создания персонализированных интерактивных инструкций в веб-приложениях.

Оглавление