Кастомные кнопки

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

Создание кастомной кнопки

Кастомная кнопка определяется в объекте шага через свойство buttons. Это массив, каждый элемент которого представляет собой объект с набором параметров:

const steps = [
  {
    element: '#my-element',
    popover: {
      title: 'Пример шага',
      description: 'Описание шага с кастомной кнопкой.',
      buttons: [
        {
          text: 'Закрыть',
          className: 'custom-close-btn',
          action: driver => driver.reset()
        },
        {
          text: 'Следующий шаг',
          className: 'custom-next-btn',
          action: driver => driver.moveNext()
        }
      ]
    }
  }
];

Основные свойства кнопки:

  • text – текст, отображаемый на кнопке.
  • className – класс CSS, который позволяет полностью контролировать стилизацию кнопки.
  • action – функция, выполняемая при нажатии на кнопку, получающая объект Driver.js в качестве аргумента.

Типовые действия кастомных кнопок

Driver.js предоставляет несколько встроенных методов для управления туром:

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

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

Динамическое управление кнопками

Кнопки могут создаваться динамически в зависимости от состояния приложения. Для этого внутри функции action или в объекте шага можно использовать условные конструкции:

const userLoggedIn = true;

const steps = [
  {
    element: '#profile',
    popover: {
      title: 'Профиль',
      description: 'Настройка профиля.',
      buttons: userLoggedIn 
        ? [
            {
              text: 'Редактировать',
              className: 'edit-btn',
              action: driver => editProfile()
            }
          ]
        : [
            {
              text: 'Войти',
              className: 'login-btn',
              action: driver => redirectToLogin()
            }
          ]
    }
  }
];

Стилизация кастомных кнопок

className позволяет полностью кастомизировать визуальное оформление кнопки. Например, можно задать градиенты, тени, анимацию при наведении или эффекты клика:

.custom-next-btn {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.custom-next-btn:hover {
  transform: scale(1.05);
}

.custom-close-btn {
  background-color: #f44336;
  color: white;
  border-radius: 5px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

Управление видимостью и активностью

Кастомные кнопки могут управляться через Jav * aScript:

  • Изменение текста: buttonElement.innerText = 'Новый текст';
  • Включение или отключение: buttonElement.disabled = true;
  • Скрытие: buttonElement.style.display = 'none';

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

Комплексные сценарии

Кастомные кнопки позволяют строить сложные сценарии, такие как:

  • Переход на шаги в зависимости от выбора пользователя.
  • Запуск внешних функций перед перемещением к следующему шагу.
  • Динамическое создание новых шагов на лету с разными наборами кнопок.

Пример использования:

{
  element: '#feature',
  popover: {
    title: 'Функция',
    description: 'Выберите действие.',
    buttons: [
      {
        text: 'Подробнее',
        className: 'info-btn',
        action: driver => {
          showInfoModal();
          driver.moveNext();
        }
      },
      {
        text: 'Пропустить',
        className: 'skip-btn',
        action: driver => driver.moveNext()
      }
    ]
  }
}

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

Оглавление