Image placeholder

Driver.js – 页面分步引导JavaScript

Image placeholder
F2EX 2018-04-14

通过 Driver.js ,你可以突出显示页面上的项目,以吸引用户的注意力。你也可以在网站改版后,使用它来引导用户展示新功能。

Driver.js 是一个轻量级(~ 4kb gzip),无需依赖但功能强大的原生 JavaScript 。兼容所有主流浏览器,可帮助你将用户的注意力集中在页面上。

特色功能:

  • 突出显示页面上的任何任何项目
  • 锁定用户交互
  • 创建功能介绍
  • 为用户添加聚焦器
  • 高度可定制 – 可在任何地方使用,可覆盖
  • 界面友好 – 可通过按键控制
  • 轻量级 – gzip 压缩后只有约4kb
  • 在所有主流浏览器中保持一致的行为
  • 免费用于个人和商业用途

安装

无论你喜欢哪种方式,你都可以使用 yarn 或 npm 进行安装。

yarn add driver.js
npm install driver.js

或者直接在文件中引入它。

<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>

用法

突出显示单个元素

demo

你只需传递选择器即可突出显示单个元素。

const driver = new Driver();
driver.highlight('#create-post');

一个实际的例子是:使用它来调暗背景并突出显示所需的元素,例如 Facebook 创建帖子的方式。

突出显示和弹出框

demo

你可以使用弹出窗口在突出显示的元素旁边显示其他详细信息。

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

此外,titledescription 也可以使用 HTML。

定位弹出框

demo

默认情况下,driver.js 会自动找到合适的弹出位置并显示它。你也可以使用 position 属性来覆盖它。

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'left', // 可以使用 `top`, `left`, `right`, `bottom`
  }
});
创建功能介绍

demo

功能介绍在引导用户展示新功能时很有用; 你可以用 Driver.js 来创建它们。当你想开始引导或演示时,定义步骤并调用 start 。 用户将能够使用键盘或使用弹出按钮控制步骤。

const driver = new Driver();

// 定义介绍的步骤
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);

// 开始介绍
driver.start();

你也可以使用 Driver.js 提供的 API 方法隐藏按钮并控制介绍。


2021-06-06