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>
|
微信