Кастомизация содержимого

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

Настройка текста и заголовков

Каждый шаг (step) в Driver.js может содержать следующие ключевые параметры текста:

  • title — заголовок подсказки. Отображается в верхней части тултипа.
  • description — основной текст, поясняющий действие или элемент интерфейса. Поддерживает HTML-разметку, что позволяет использовать <strong>, <em>, <a> и другие теги для выделения ключевых моментов.
  • popoverClass — позволяет добавить кастомный CSS-класс к подсказке, чтобы применять собственные стили.

Пример:

const driver = new Driver({
    steps: [
        {
            element: '#menu-button',
            popoverClass: 'custom-popover',
            title: 'Меню навигации',
            description: 'Нажмите сюда, чтобы открыть главное меню. <strong>Важно:</strong> используйте его для быстрого доступа к разделам.'
        }
    ]
});
driver.start();

Использование HTML в подсказках

Driver.js позволяет полностью управлять HTML-содержимым тултипа через параметр description. Это открывает возможности для:

  • Вставки ссылок и кнопок
  • Форматирования текста (жирный, курсив, списки)
  • Встроенных изображений или иконок

Пример:

{
    element: '#profile',
    title: 'Профиль пользователя',
    description: `
        <p>Здесь отображается информация о пользователе.</p>
        <ul>
            <li>Имя и фамилия</li>
            <li>Аватар</li>
            <li>Настройки аккаунта</li>
        </ul>
        <a href="/settings">Перейти в настройки</a>
    `
}

Кастомизация кнопок управления

Driver.js позволяет управлять кнопками навигации внутри подсказки через объект buttons и встроенные методы. По умолчанию доступны кнопки «Next», «Previous», «Close», но можно создавать собственные:

const driver = new Driver({
    steps: [
        {
            element: '#submit-button',
            title: 'Отправка формы',
            description: 'Нажмите здесь для отправки данных.',
            buttons: [
                {
                    text: 'Пропустить',
                    action: driver.next
                },
                {
                    text: 'Закрыть',
                    action: driver.reset
                }
            ]
        }
    ]
});

Каждая кнопка может содержать:

  • text — текст кнопки
  • action — функция, выполняемая при клике
  • className — CSS-класс для стилизации кнопки

Настройка позиции и ориентации подсказок

Driver.js позволяет задавать расположение подсказки относительно целевого элемента через параметр position. Поддерживаются значения:

  • 'top'
  • 'bottom'
  • 'left'
  • 'right'
  • 'centered' — для всплывающих окон без привязки к элементу

Также можно использовать padding и offset для точной подстройки позиции:

{
    element: '#search',
    title: 'Поле поиска',
    description: 'Введите текст для поиска товаров.',
    position: 'bottom',
    padding: 10,
    offset: 5
}

Динамическое обновление содержимого

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

driver.defineSteps([
    {
        element: '#cart',
        title: 'Корзина',
        description: 'Текущие товары отображаются здесь.'
    }
]);

driver.start();

driver.on('beforeStep', (step) => {
    if(step.element === '#cart') {
        step.description = 'Корзина обновлена. Сейчас в ней ' + getCartItemCount() + ' товаров.';
    }
});

Кастомные шаблоны подсказок

Для глубокой кастомизации можно использовать CSS и кастомные классы для создания уникальных стилей:

  • Изменение цветов фона, шрифта и рамок
  • Анимации появления/исчезновения
  • Позиционирование стрелок подсказки

Пример CSS:

.custom-popover {
    background-color: #2a2a2a;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.custom-popover .driver-arrow {
    border-color: #2a2a2a;
}

Использование кастомных иконок и элементов

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

{
    element: '#notifications',
    title: '<img src="/icons/bell.svg" alt="Уведомления"> Уведомления',
    description: 'Все новые события отображаются здесь.'
}

Поддержка мультиязычности

Текстовые элементы можно хранить в объекте локализации и динамически подставлять при инициализации Driver.js:

const translations = {
    ru: {
        title: 'Поиск',
        description: 'Введите запрос для поиска.'
    },
    en: {
        title: 'Search',
        description: 'Enter query to search.'
    }
};

const driver = new Driver({
    steps: [
        {
            element: '#search',
            title: translations.ru.title,
            description: translations.ru.description
        }
    ]
});

Итоговые возможности кастомизации

  • Полная настройка текста, заголовков и HTML-контента
  • Настройка кнопок и действий пользователя
  • Контроль позиции и внешнего вида подсказок
  • Динамическое обновление шагов в реальном времени
  • Использование кастомных стилей, иконок и шаблонов
  • Поддержка мультиязычности и локализации

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

Оглавление