Подключение через CDN

Для начала работы с Intro.js существует несколько способов интеграции в проект, одним из самых удобных является использование CDN (Content Delivery Network). Этот подход позволяет быстро подключить библиотеку без необходимости локальной установки через npm или скачивания файлов. CDN обеспечивает загрузку файлов с внешнего сервера, что ускоряет процесс разработки и минимизирует настройку окружения.

Подключение CSS и JS файлов

Intro.js требует подключения двух основных компонентов: CSS для стилей подсветки элементов и JS для работы логики шагов. Через CDN это реализуется следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.0.1/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js@7.0.1/minified/intro.min.js"></script>
  • <link> – подключает стили, определяющие оформление подсветки элементов, положение подсказок и анимацию.
  • <script> – подключает основной скрипт библиотеки, который отвечает за навигацию по шагам и отображение подсказок.

Важно следить за версией библиотеки в URL, чтобы не возникало несовместимости между примерами кода и функционалом.

Инициализация Intro.js

После подключения файлов через CDN библиотеку можно использовать сразу в скриптах. Создание интерактивного тура выполняется через метод introJs(), который возвращает объект управления шагами:

const tour = introJs();
tour.setOptions({
  steps: [
    {
      intro: "Добро пожаловать в интерактивный тур!"
    },
    {
      element: document.querySelector('#feature1'),
      intro: "Это первый функциональный блок."
    },
    {
      element: document.querySelector('#feature2'),
      intro: "Это второй функциональный блок.",
      position: 'right'
    }
  ],
  showStepNumbers: true,
  exitOnOverlayClick: false,
  showBullets: true
});

tour.start();

Ключевые моменты при инициализации:

  • steps – массив объектов, где каждый объект описывает шаг тура.

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

  • showStepNumbers – отображение номера шага.

  • exitOnOverlayClick – позволяет или запрещает закрывать тур кликом на затемненную область.

  • showBullets – включает визуальные индикаторы шагов в нижней части подсказки.

Настройка внешнего вида через CDN

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

  • .introjs-tooltip – блок с текстом подсказки.
  • .introjs-helperLayer – подсветка целевого элемента.
  • .introjs-bullets – индикаторы шагов.

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

<style>
  .introjs-tooltip {
    background-color: #2a9d8f !important;
    color: #ffffff !important;
    border-radius: 8px !important;
  }

  .introjs-arrow {
    border-color: #2a9d8f !important;
  }
</style>

Загрузка дополнительных плагинов и тем

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.0.1/themes/introjs-modern.css">

Использование внешних тем через CDN минимизирует настройку локальных файлов и позволяет быстро интегрировать готовый стиль.

Преимущества использования CDN

  1. Быстрая интеграция – не требуется установка npm или локальная настройка проекта.
  2. Кэширование на стороне клиента – популярные CDN обеспечивают загрузку файлов из кэша браузера, ускоряя открытие страницы.
  3. Обновление версий – достаточно заменить ссылку на новую версию для использования последних функций.
  4. Минимальные требования к серверу – файлы загружаются с внешнего сервера, что уменьшает нагрузку на собственный хостинг.

Ограничения подключения через CDN

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

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

Оглавление