DriverJs的简单使用
2020-11-20 本文已影响0人
王二麻子88
注意事项:
因为 driverjs在 0.9版本中会存在渲染不及时问题, 在调用的时候可能需要加入一个延迟函数, 为了不影响其他代码的正常运行可以考虑使用 Promise对象包住
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引导栏的使用</title>
<link rel="stylesheet" href="./dist/driver.min.css" type="text/css">
<script src="./dist/driver.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="./index.js" type="text/javascript"></script>
</head>
<body>
<!-- 设置引导栏 -->
<div class="box">
<div class="box-content">
<h1 id="h1-1">你好1
<button id="btn1">你好1高亮</button>
</h1>
<h1 id="h1-2">你好2
<button id="btn2">高亮2</button>
</h1>
<h1 id="h1-3">你好3
<button id="btn3">高亮2</button>
</h1>
<h1 id="h1-4">你好4</h1>
<h1 id="h1-5">你好5</h1>
<!-- 一次让这个五个标签高亮 -->
</div>
</div>
<script type="text/javascript">
let btn1 = this.document.querySelector("#btn1");
const driver = new Driver();
btn1.onclick = function() {
// 这个高亮方法因为插件的原因本身是具有一定的延迟效果
setTimeout(function(){
driver.highlight("#h1-1");
}, 10)
}
let btn2 = this.document.querySelector("#btn2");
const stepArr = [
// 步骤1
{
element: "#h1-3",
popover: {
title: "步骤1",
description: "步骤1介绍"
},
closeBtnText: "关闭1",
nextBtnText: "前往步骤2"
},
{
element: "#h1-4",
popover: {
title: "步骤2",
description: "步骤2介绍"
},
closeBtnText: "关闭2", //
prevBtnText: "返回上一步", // 返回一步的文档, 默认显示
nextBtnText: "前往步骤3"
},
{
element: "#h1-5",
popover: {
title: "步骤3",
description: "步骤3介绍"
},
closeBtnText: "关闭3",
nextBtnText: "结束"
},
]
btn2.onclick = function() {
// 这个高亮方法因为插件的原因本身是具有一定的延迟效果
setTimeout(function(){
driver.highlight({
element: "#h1-2",
// 高亮弹出层配置
popover: {
title: "wang",
description: "wang text"
}
});
}, 10)
}
document.querySelector("#btn3").onclick = function() {
setTimeout(function() {
// driver.highlight(stepArr[0]);
// driver 定义步骤
driver.defineSteps(stepArr);
driver.start();
}, 10);
}
</script>
</body>
</html>
