driver.js

Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项,支持所有主要浏览器。

Driver.js官网:https://driverjs.com

英文文档地址:https://driverjs.com/docs/installation

Driver.js中文网(更新不及时):https://driver.employleague.cn

gitthub地址:https://github.com/kamranahmedse/driver.js

点我体验一下

若点击无反应,请手动刷新页面后重试

Driver.js 自定义字段

这里是driver需要了解的常用选项,更多请查看官方文档。

配置含义可选参数
showProgress是否展示步数trueorfalse
overlayColor遮罩背景颜色色值or表示颜色的单词
overlayOpacity遮罩透明度0~1,默认为0.7
stagePadding选中元素和引导框的边距数值,默认为10
showButtons是否在底部显示按钮trueorfalse
nextBtnText下一步按钮的文字默认为Next
prevBtnText上一步按钮的文字默认为Previous
doneBtnText完成按钮的文字默认为done
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
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>
<script>
document.addEventListener("DOMContentLoaded", function () {
const driver = window.driver.js.driver;
const driverObj = driver({
showProgress: true,
overlayColor: 'black',
overlayOpacity: 0.8,
stagePadding: 8,
showButtons: ['下一步', '上一步'],
nextBtnText: '下一步', // Next button text for this step 下一步按钮的文字
prevBtnText: '上一步', // Previous button text for this step 上一步按钮文字
showButtons: true, // Do not show control buttons in footer 是否在底部显示按钮
doneBtnText: '完成', // Text on the final button 完成按钮的文字
steps: [
{ element: '元素的class', popover: { title: '标题1', description: '这是文章的第1个弹窗的标题', side: "left", align: 'start' }},
{ element: '元素的id', popover: { title: '标题2', description: '这是文章的第2个弹窗的标题', side: "bottom", align: 'start' }},
{ popover: { title: '没有选择元素', description: '整个页面都生效了' } }
]
});
document.getElementById('buttonId').addEventListener('click', function () {
// 启动引导
driverObj.drive();
});
});
</script>