跳到主要内容

driver.js

功能非常强大的用户引导、教程和导览功能的库。适合活动等落地页使用,让用户快速了解主要页面功能。

一个简单的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Driver</title>
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
</head>
<body>
<div class="driver">
<h1 class="class_1">Line 1</h1>
<h1 class="class_2">Line 2</h1>
</div>

<script>
const driver = window.driver.js.driver

const driverObj = driver({
showProgress: true,
allowClose: false,
steps: [
{
element: '.class_1',
popover: {
title: 'Step 1',
description: 'test1',
side: 'left',
align: 'start',
nextBtnText: '下一个',
prevBtnText: '上一个',
},
},
{
element: '.class_2',
popover: {
title: 'Step 2',
description: 'test2',
side: 'left',
align: 'start',
nextBtnText: '下一个',
prevBtnText: '上一个',
},
},
{
popover: {
title: 'Finished',
description: 'finish',
// 最后一个,不能改 nextBtnText,否则无法展示 doneBtnText
// nextBtnText: '下一个',
prevBtnText: '上一个',
doneBtnText: '结束啦',
},
},
],
})

driverObj.drive()
</script>
</body>
</html>

上手很容易,配置选项也很多,也支持事件回调。不过上面简单的例子,我就发现一个问题。最后一个 popover,不能配置 nextBtnText,否则 doneBtnText 不能生效。感觉这个因该算作 bug。

此外我感觉更麻烦的应该是细节 UI 调整,用这种功能的页面大概率都有细致的 UI 展现要求。driver.js 的解决方案主要是自定义样式类来处理。