Первый тур по странице

Для начала необходимо подключить библиотеку Driver.js в проект. Это можно сделать через менеджер пакетов npm или с помощью CDN.

Через npm:

npm install driver.js

После установки подключение в Jav * aScript:

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

Через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js/dist/driver.min.css">
<script src="https://cdn.jsdelivr.net/npm/driver.js/dist/driver.min.js"></script>

Подключение CSS обязательно, так как без него подсветка элементов и всплывающие подсказки работать не будут.

Создание экземпляра Driver.js

Для работы с подсказками создаётся объект Driver:

const driver = new Driver({
    allowClose: true,        // Возможность закрыть подсказку кликом по фону
    overlayClickNext: false, // Продвижение к следующему шагу при клике на фон
    doneBtnText: 'Готово',  // Текст кнопки завершения тура
    nextBtnText: 'Далее',   // Текст кнопки следующего шага
    prevBtnText: 'Назад',   // Текст кнопки предыдущего шага
});

Параметры можно настраивать по необходимости. Ключевые настройки:

  • allowClose — определяет, можно ли закрыть тур по клику вне элемента.
  • overlayClickNext — если true, клик по затемнённой области переключает на следующий шаг.
  • doneBtnText, nextBtnText, prevBtnText — текст кнопок управления туром.
  • opacity — прозрачность затемнения фона (по умолчанию 0.5).
  • padding — внутренний отступ вокруг подсвечиваемого элемента.

Определение шагов тура

Каждый шаг задаётся объектом с ключевыми свойствами:

driver.defineSteps([
    {
        element: '#header',          // CSS-селектор элемента для подсветки
        popover: {
            title: 'Шапка сайта',   // Заголовок всплывающей подсказки
            description: 'Здесь находится логотип и меню навигации.',
            position: 'bottom'      // Позиция подсказки относительно элемента
        }
    },
    {
        element: '#sidebar',
        popover: {
            title: 'Боковое меню',
            description: 'Содержит ссылки на основные разделы.',
            position: 'right'
        }
    },
    {
        element: '#main-content',
        popover: {
            title: 'Основная область',
            description: 'Здесь отображается основной контент страницы.',
            position: 'top'
        }
    }
]);

Основные свойства шага:

  • element — обязательное поле, CSS-селектор или DOM-элемент.

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

    • title — заголовок.
    • description — подробное описание.
    • position — одна из возможных позиций: top, bottom, left, right, center, auto.

  • onNext, onPrevious, onShow, onHide — функции-обработчики событий шага.

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

Запуск тура осуществляется методом start():

driver.start();

Можно также начать с определённого шага, указав его индекс:

driver.start(1); // Запускает тур со второго шага (индексация с нуля)

Управление туром во время работы:

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

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

Driver.js позволяет гибко настраивать внешний вид:

  • borderRadius — радиус скругления подсвечиваемого элемента.
  • padding — расстояние между элементом и затемнением.
  • opacity — уровень затемнения фона.
  • animate — анимация появления подсказки (по умолчанию true).

Пример:

const driver = new Driver({
    opacity: 0.7,
    padding: 10,
    borderRadius: 8,
    animate: true
});

Работа с динамическими элементами

Если элемент появляется на странице после загрузки (например, через AJAX), необходимо убедиться, что он доступен перед определением шага:

const interval = setInterval(() => {
    const element = document.querySelector('#dynamic-button');
    if(element){
        driver.defineSteps([
            {
                element: '#dynamic-button',
                popover: {
                    title: 'Динамическая кнопка',
                    description: 'Появляется после загрузки данных.',
                    position: 'bottom'
                }
            }
        ]);
        driver.start();
        clearInterval(interval);
    }
}, 500);

Обработка событий тура

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

driver.on('start', () => console.log('Тур начат'));
driver.on('complete', () => console.log('Тур завершен'));
driver.on('reset', () => console.log('Тур сброшен'));
driver.on('next', step => console.log('Следующий шаг:', step));
driver.on('previous', step => console.log('Предыдущий шаг:', step));
driver.on('highlighted', step => console.log('Подсвечен элемент:', step.element));

Практические рекомендации

  • Подсвечивать только ключевые элементы интерфейса, чтобы не перегружать пользователя.
  • Использовать короткие, понятные описания в popover.description.
  • Проверять, что все селекторы корректны и элементы существуют на момент запуска тура.
  • Разделять тур на логические блоки для длинных страниц.
  • Настраивать позиции всплывающих подсказок для оптимального восприятия на разных разрешениях.

Эта последовательность шагов и настроек позволяет реализовать первый тур по странице, эффективно знакомящий пользователя с ключевыми элементами интерфейса, без перегрузки и с полной интерактивностью.

Оглавление