Driver.jsの使用
1.住所
源码地址：https://gitee.com/mirrors/Driverjs
cnd地址：https://unpkg.com/driver.js/dist/driver.min.js
2.引用方法
1.npmまたはyarn
yarn add driver.js
npm install driver.js
2、cdnの紹介
<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.インポートのためにファイルをローカルにダウンロードします
<link rel="stylesheet" href="driver.min.css">
<script src="driver.min.js"></script>
3.主なパラメータ設定
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
});
第四に、コードケース
<!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中
以上がフロントエンドページ案内機能で実装されている内容です。
私の通常のプロジェクトに共通する問題と筆記試験の知識を共有し、CSDNであなたと面接し、一緒に進歩します。さあ。