Управление кнопками

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

Настройка кнопок по умолчанию

Каждый шаг в Driver.js может содержать стандартный набор кнопок:

  • Next — переход к следующему шагу.
  • Previous — возврат к предыдущему шагу.
  • Close — завершение пошагового руководства.

Пример конфигурации шага с кнопками по умолчанию:

const driver = new Driver();
driver.defineSteps([
  {
    element: '#feature1',
    popover: {
      title: 'Особенность 1',
      description: 'Описание функционала',
      buttons: ['next', 'previous', 'close']
    }
  }
]);
driver.start();

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

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

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

driver.defineSteps([
  {
    element: '#feature2',
    popover: {
      title: 'Особенность 2',
      description: 'Подробное описание',
      buttons: [
        {
          text: 'Далее',
          action: function() {
            console.log('Переход к следующему шагу');
            driver.moveNext();
          }
        },
        {
          text: 'Закрыть',
          action: function() {
            console.log('Руководство завершено');
            driver.reset();
          }
        }
      ]
    }
  }
]);

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

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

Driver.js позволяет динамически контролировать доступность кнопок. Для этого используют свойства:

  • disabled — устанавливает, активна ли кнопка.
  • hidden — позволяет скрыть кнопку без удаления из конфигурации.

Пример:

buttons: [
  {
    text: 'Следующий',
    action: function() { driver.moveNext(); },
    disabled: true
  },
  {
    text: 'Пропустить',
    action: function() { driver.reset(); },
    hidden: false
  }
]

Использование этих свойств полезно для реализации логики, зависящей от состояния интерфейса, например, ожидания заполнения формы перед активацией кнопки “Далее”.

Изменение кнопок на лету

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

driver.setStepOptions(1, {
  popover: {
    buttons: [
      { text: 'Продолжить', action: () => driver.moveNext(), disabled: false }
    ]
  }
});

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

Использование CSS для стилизации кнопок

Driver.js предоставляет возможность применять собственные стили к кнопкам через CSS. Для этого используют стандартные селекторы поповеров и кнопок:

.driver-popover button {
  background-color: #3498db;
  color: #fff;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: bold;
}

.driver-popover button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

Важно: кастомные стили могут сочетаться с динамическим управлением свойствами disabled и hidden, создавая интерактивные и визуально понятные элементы управления.

Обработка событий кнопок

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

  • driver.on('next', callback) — событие перехода к следующему шагу.
  • driver.on('previous', callback) — возврат к предыдущему шагу.
  • driver.on('reset', callback) — завершение руководства.

Пример объединения событий с кнопками:

driver.on('next', function(step) {
  console.log(`Шаг ${step} завершён, выполняем дополнительную логику`);
});

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

Комбинирование стандартных и кастомных кнопок

В Driver.js можно использовать одновременно стандартные и кастомные кнопки для одного шага:

buttons: [
  'previous',
  {
    text: 'Сделать действие',
    action: function() { performAction(); driver.moveNext(); }
  },
  'close'
]

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

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

Оглавление