通过 Driver.js ,你可以突出显示页面上的项目,以吸引用户的注意力。你也可以在网站改版后,使用它来引导用户展示新功能。
Driver.js 是一个轻量级(~ 4kb gzip),无需依赖但功能强大的原生 JavaScript 。兼容所有主流浏览器,可帮助你将用户的注意力集中在页面上。
特色功能:
- 突出显示页面上的任何任何项目
- 锁定用户交互
- 创建功能介绍
- 为用户添加聚焦器
- 高度可定制 – 可在任何地方使用,可覆盖
- 界面友好 – 可通过按键控制
- 轻量级 – gzip 压缩后只有约4kb
- 在所有主流浏览器中保持一致的行为
- 免费用于个人和商业用途
安装
无论你喜欢哪种方式,你都可以使用 yarn 或 npm 进行安装。
yarn add driver.js
npm install driver.js
或者直接在文件中引入它。
<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>
用法
突出显示单个元素
– demo
你只需传递选择器即可突出显示单个元素。
const driver = new Driver();
driver.highlight('#create-post');
一个实际的例子是:使用它来调暗背景并突出显示所需的元素,例如 Facebook 创建帖子的方式。
突出显示和弹出框
– demo
你可以使用弹出窗口在突出显示的元素旁边显示其他详细信息。
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
}
});
此外,title
和 description
也可以使用 HTML。
定位弹出框
– demo
默认情况下,driver.js 会自动找到合适的弹出位置并显示它。你也可以使用 position
属性来覆盖它。
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
position: 'left', // 可以使用 `top`, `left`, `right`, `bottom`
}
});
创建功能介绍
– demo
功能介绍在引导用户展示新功能时很有用; 你可以用 Driver.js 来创建它们。当你想开始引导或演示时,定义步骤并调用 start
。 用户将能够使用键盘或使用弹出按钮控制步骤。
const driver = new Driver();
// 定义介绍的步骤
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
}
},
{
element: '#second-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'top'
}
},
{
element: '#third-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'right'
}
},
]);
// 开始介绍
driver.start();
你也可以使用 Driver.js 提供的 API 方法隐藏按钮并控制介绍。
2021-06-06