转载

Driver.js – 页面分步引导JavaScript

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

下载演示 GitHub

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',
  }
});

此外， title 和 description 也可以使用 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 方法隐藏按钮并以编程方式控制介绍。

原文 http://f2ex.cn/driver-js/

正文到此结束