-

页面分步引导组件Driver.js

WEB前端

Web开发的时候,无意中发现了一下页面分步引导组件Driver.js。Driver.js是一个轻量级(约4kb gzip),并且无任何依赖,但功能强大的JavaScript引擎。Driver.js可以提高用户对页面的关注度,,也可以创建强大的分部引导介绍功能,号召性用语组件,焦点移位器等。更重要的是Driver.js支持所有的主流浏览器。下面雷雪松就详细的介绍一下页面分步引导组件Driver.js的用法。

1、Driver.js安装,可以使用script标签引入,也可以使用npm安装,import引入。
a、在html文件中用script标签引入driver.min.css文件和driver.min.js文件

1
 <script src="/dist/driver.min.js"></script>

b、使用npm install driver.js,然后在文件中import导入。这样就可以很好的和Vue结合一起使用了。

1
npm install driver.js
1
2
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

2、Driver.js基本用法。
a、单个节点高亮显示

1
2
const driver = new Driver();
driver.highlight('#element');

b、高亮和弹出框

1
2
3
4
5
6
7
8
9
10
const driver = new Driver();
driver.highlight({
element: '#element',
popover: {
title: '弹窗标题',//也可以使用HTML标签
description: '弹窗内容',//也可以使用HTML标签
position: 'bottom',//位置,可选值: left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
offset: 20,//位移大小
}
});

c、设置分步引导介绍功能

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();
// 设置介绍的步骤
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'
}
},
]);
// 开始分步引导介绍
driver.start();

以上是雷雪松对Driver.js的讲解。是不是很简单,很炫酷?赶紧用起来吧,让你的用户在使用你的产品时,更快更好的上手吧!

来源:页面分步引导组件Driver.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注