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

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

Подключение CSS и JS

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

<!-- CSS Driver.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@0.9.8/dist/driver.min.css">

<!-- JS Driver.js -->
<script src="https://cdn.jsdelivr.net/npm/driver.js@0.9.8/dist/driver.min.js"></script>

Пояснения:

  • driver.min.css — минимизированный CSS файл, обеспечивающий корректное отображение подсветки и модального окна.
  • driver.min.js — минимизированный JS файл, содержащий весь функционал Driver.js.
  • Версия 0.9.8 указана для стабильного подключения, но можно использовать последнюю доступную на CDN версию.

После подключения CSS и JS объекты Driver.js становятся доступными через глобальный объект Driver.

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

Создание и запуск Driver.js не требует дополнительных модулей:

// Создание нового экземпляра
const driver = new Driver({
    animate: true,      // включение анимации перехода между шагами
    opacity: 0.75,      // непрозрачность фона
    padding: 10,        // отступ вокруг выделяемого элемента
    allowClose: false,  // запрет закрытия по клику на фон
    overlayClickNext: true, // клик по затемненному фону переводит к следующему шагу
});

Ключевые параметры:

  • animate — анимация при появлении подсветки. Значение true создаёт плавный эффект.
  • opacity — степень затемнения фоновой области. Диапазон 0.0–1.0.
  • padding — пространство между подсвечиваемым элементом и рамкой подсветки.
  • allowClose — если false, закрытие через кнопку “×” будет отключено.
  • overlayClickNext — переключение на следующий шаг при клике по затемнённой области.

Добавление шагов

Шаги определяются массивом объектов с указанием элементов DOM и текста подсказки:

driver.defineSteps([
    {
        element: '#menu',           // селектор элемента для подсветки
        popover: {
            title: 'Главное меню',
            description: 'Здесь находятся основные разделы сайта',
            position: 'bottom'      // позиция подсказки относительно элемента
        }
    },
    {
        element: '#search',
        popover: {
            title: 'Поиск',
            description: 'Введите ключевые слова для поиска',
            position: 'right'
        }
    }
]);

Параметры шага:

  • element — CSS-селектор или объект DOM элемента.

  • popover — объект с настройками подсказки:

    • title — заголовок подсказки.
    • description — текстовое описание шага.
    • position — положение относительно элемента (top, bottom, left, right).

Запуск и управление

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

driver.start();

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

  • moveNext() — переход к следующему шагу.
  • movePrevious() — возврат к предыдущему шагу.
  • reset() — сброс прогресса и закрытие всех подсветок.
  • highlight(element) — временно подсветить конкретный элемент.

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

Даже при использовании CDN можно изменять стили подсветки, создавая кастомные классы:

.driver-highlight {
    border-radius: 12px;       /* закругление углов подсветки */
    border: 3px solid #FF5722; /* цвет рамки */
}

.driver-popover {
    background-color: #fff;    /* фон подсказки */
    color: #333;               /* цвет текста */
    font-size: 16px;           /* размер шрифта */
}

Эти стили автоматически применяются к элементам с классами, используемыми Driver.js. Подключение через CDN не препятствует полной кастомизации.

Преимущества подключения через CDN

  1. Минимальная настройка — достаточно вставить два тега <link> и <script>.
  2. Автоматическое кеширование — браузеры загружают библиотеку с CDN, что ускоряет работу.
  3. Совместимость с любыми проектами — не требуется сборщик модулей.
  4. Легкость обновления — достаточно заменить версию в ссылке на актуальную.

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

Оглавление