JavaScript Driver.js Driverjs 前端引导页 分布式引导

Driver.js–页面分步引导

Posted by cl9000 on April 01, 2020

好好工作，搞好身体，互相帮助 —

一个轻量级(约4kb gzip)但强大的JavaScript引擎，帮助您驱动用户的注意力在页面上。

一些示例用例可以创建强大的特性介绍、动作调用组件、焦点转移器等。

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

特色功能：

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

安装

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

1
2
yarn add driver.js
npm install driver.js

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

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

用法

Highlighting a Single Element – Without Popover 突出显示单个元素

__ Show Demo

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

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

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

这方面的实际用例可能是当用户与元素交互时突出显示元素

1
2
3
4
5
6
7
const focusDriver = new Driver();

// Highlight the section on focus
document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    focusDriver.focus('#creation-input');
  });

聚焦任何输入，看看它是如何将高亮显示从一个元素移动到另一个元素的
你也可以关闭动画或者在角落设置padding。稍后会详细介绍。

Highlighting a Single Element – With Popover 突出显示单个元素-弹出窗口

如果想在突出显示的元素旁边显示一些细节，可以通过指定标题和描述轻松实现
__ Show Demo

1
2
3
4
5
6
7
8
const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

你也可以通过一组特定的选项来修改这个弹出窗口的行为。下面有更多的介绍。
此外，title 和 description 也可以使用 HTML。

Popover Positioning 弹出窗口定位

__ Show Demo

你也可以改变弹出窗口的位置为left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom或者bottom, bottom-center, bottom-right, mid-center。

1
2
3
4
5
6
7
8
9
10
11
12
const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

如果你不指定位置或指定它为自动，它会自动为弹出窗口找到合适的位置并显示它

HTML弹窗 HTML in Popovers

__ Show Demo
你也可以在主体中指定HTML或者弹出窗口的标题。下面是一个例子:

1
2
3
4
5
6
7
8
const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: '<em>An italicized title</em>',
    description: 'Description may also contain <strong>HTML</strong>'
  }
});

当然，它可以是任何有效的HTML。

禁用关闭外部单击 Disable Close on Outside Click

__ Show Demo

默认情况下，driver.js会被重置，如果用户点击突出显示的元素，你可以禁用这个:

1
2
3
4
5
6
7
8
9
10
11
const driver = new Driver({
    allowClose: false,
});

driver.highlight({
  element: '#some-element',
  popover: {
    title: '<em>An italicized title</em>',
    description: 'Description may also contain <strong>HTML</strong>'
  }
});

如果你使用这个选项，对于多步骤驱动程序，它会在你完成弹出窗口后关闭，或者你可以通过编程关闭它。对于单个元素弹窗，你需要正确地关闭它，否则它不会被关闭

1
driver.reset()

Creating Feature Introductions 创建功能介绍

__ Show Demo
您还可以进行功能强大的特性介绍，以指导用户了解这些特性。只需提供一个步骤数组，其中每个步骤指定要突出显示的元素。

下面是一个简单的例子，告诉你如何结合介绍中的步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      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'
    }
  },
]);
// Start the introduction
driver.start();

这只是特性介绍的一个快速示例。想要更丰富的体验，请浏览"Quick Tour"

你也可以关闭弹出窗口中的页脚按钮，在这种情况下，用户可以使用键盘上的箭头键来控制弹出窗口。或者您可以使用驱动程序提供的方法来控制它。

Without Overlay 没有覆盖叠加

__ Show Demo
你也可以创建特性介绍和做上面列出的所有事情而不需要叠加。你所要做的就是将不透明度设置为0。

1
2
3
4
5
6
7
8
9
10
11
12
const driver = new Driver({
    opacity: 0,
});

driver.highlight({
  element: '#run-element-without-popover',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'top', // can be `top`, `left`, `right`, `bottom`
  }
});

你也可以对功能介绍做同样的事情

更多

Driver Definition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const driver = new Driver({
  className: 'scoped-class', // className to wrap driver.js popover
  animate: true,  // Animate while changing highlighted element
  opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
  padding: 10,    // Distance of element from around the edges
  allowClose: true, // Whether clicking on overlay should close or not
  overlayClickNext: false, // Should it move to next step on overlay click
  doneBtnText: 'Done', // Text on the final button
  closeBtnText: 'Close', // Text on the close button for this step
  nextBtnText: 'Next', // Next button text for this step
  prevBtnText: 'Previous', // Previous button text for this step
  showButtons: false, // Do not show control buttons in footer
  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
  onHighlighted: (Element) {}, // Called when element is fully highlighted
  onDeselected: (Element) {}, // Called when element has been deselected
  onReset: (Element) {},        // Called when overlay is about to be cleared
  onNext: (Element) => {},      // Called when moving to next step on any step
  onPrevious: (Element) => {},  // Called when moving to next step on any step
});

请注意，您在驱动程序定义中提供的所有按钮选项都可以通过在步骤定义中提供它们来为特定的步骤覆盖

步骤定义
这里有一组选项，你可以在每个步骤中传递，即步骤数组中的一个项目或你传递给highlight方法的对象

const stepDefinition = {
  element: '#some-item',        // Query selector string or Node to be highlighted
  popover: {                    // There will be no popover if empty or not given
    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
    title: 'Title',             // Title on the popover
    description: 'Description', // Body of the popover
    showButtons: false,         // Do not show control buttons in footer
    closeBtnText: 'Close',      // Text on the close button for this step
    nextBtnText: 'Next',        // Next button text for this step
    prevBtnText: 'Previous',    // Previous button text for this step
  }

您可以使用多种选项来实现您想要的任何目标。我有一些进一步改进它的计划，确保关注GitHub page - https://github.com/kamranahmedse/driver.js页面

参考地址

github：https://github.com/kamranahmedse/driver.js
用法和用例介绍：https://kamranahmed.info/driver.js/
简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript Driver.js Driverjs 前端引导页 分布式引导
FRIENDS