Use of Driver.js
1. Address
源码地址：https://gitee.com/mirrors/Driverjs
cnd地址：https://unpkg.com/driver.js/dist/driver.min.js
2. Citation method
1. npm or yarn
yarn add driver.js
npm install driver.js
2, cdn introduction
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
3. Download the file to the local for import
<link rel="stylesheet" href="driver.min.css">
<script src="driver.min.js"></script>
3. Main parameter configuration
const driver = new Driver({
className: 'scoped-class', // className to wrap driver.js popover
animate: true, // Whether to animate or not
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
allowClose: true, // Whether the click on overlay should close or not
overlayClickNext: false, // Whether the click on overlay should move next
doneBtnText: 'Done', // Text on the final button
closeBtnText: 'Close', // Text on the close button for this step
stageBackground: '#ffffff', // Background color for the staged behind highlighted element
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 previous step on any step
});
Fourth, the code case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面引导</title>
<!-- 引入js和css -->
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
</head>
<body>
<h1 id="h1">hello1</h1>
<h1 id="h2">hello2</h1>
<h1 id="h3">hello3</h1>
<h1 id="h4">hello4</h1>
<h1 id="h5">hello5</h1>
<button id="btn1">高亮h1</button>
<button id="btn2">高亮h2</button>
<button id="btn3">带步骤的高亮</button>
<script>
const driver = new Driver();
let btn1 = document.querySelector('#btn1');
let btn2 = document.querySelector('#btn2');
//高亮
btn1.onclick = function () {
setTimeout(() => {
driver.highlight('#h1')
}, 0);
}
//可以点击的高亮
btn2.onclick = function () {
setTimeout(() => {
driver.highlight({
element: '#h2',
popover: {
title: "题目",
description: "描述"
},
closeBtnText: '完成'
})
}, 0);
}
//带步骤的高亮
//定义步骤变量
const stepArr = [{
element: '#h2',
popover: {
title: "步骤一",
description: "描述"
},
closeBtnText: '跳过引导',
nextBtnText: '下一步',
prevBtnText: '上一步',
onNext: () => {
console.log('点击下一步会触发这个事件')
}
}, {
element: '#h3',
popover: {
title: "步骤二",
description: "描述"
},
closeBtnText: '跳过引导',
nextBtnText: '下一步',
prevBtnText: '上一步',
onPrevious: () => {
console.log('点击上一步会触发这个事件')
}
}, {
element: '#h4',
popover: {
title: "步骤三",
description: "描述"
},
closeBtnText: '跳过引导',
nextBtnText: '下一步',
prevBtnText: '上一步',
}, {
element: '#h5',
popover: {
title: "步骤四",
description: "描述"
},
closeBtnText: '跳过引导',
prevBtnText: '上一步',
doneBtnText: '完成'
}]
btn3.onclick = function () {
setTimeout(() => {
//定义步骤
driver.defineSteps(stepArr);
//运行
driver.start();
}, 0);
}
</script>
</body>
</html>
需要注意的点在于需要将业务放到setTimeout中
The above is the content implemented by the front-end page guidance function.
I will share the common problems in my usual projects and the knowledge of the written test and interview with you on CSDN, and make progress together. Come on.