WebTour JS 使用 Vanilla JS 为您的网站提供的轻量级用户分步指南 用户引导

Question

特征

• 高亮元素 - 可以在页面上突出显示特定元素，而无需修改元素位置和样式。
• 用户演练 - 可用于使用模式和弹出框将用户引导到您的网站。
• 幻灯片 - 可以在您的网站中用作幻灯片。
• 动态元素 定位 - 可以在游览期间定位动态创建的元素。
• 自动滚动 - 自动滚动到弹出框的位置。
• 键盘控制 - 允许使用 next、back 和 esc 键进行控制。
• 调整大小时更新位置。

WebTour 高亮如何工作？

WebTour highlight 的工作原理是在页面上添加覆盖，但突出显示的元素除外。 它基本上是一个带有孔的叠加层，显示突出显示的元素。 WebTour 甚至可以在模态上突出显示。

安装

引入 /dist 目录中的文件。

<link rel="stylesheet" href="/dist/webtour.min.css">
<script src="/dist/webtour.min.js"></script>

或者通过使用 UNPKG 包括在内。

<link rel="stylesheet" href="https://unpkg.com/webtour@1.1.0/dist/webtour.min.css">
<script src="https://unpkg.com/webtour@1.1.0/dist/webtour.min.js"></script>

基本用法

突出显示元素

突出显示没有弹出框的元素。 可用于将用户的注意力集中在一个元素上。

const wt = new WebTour();
wt.highlight('#target');

用户演练

使用分步指南将用户引导至您的网站。

const wt = new WebTour();
const steps = [
    {
        element: '#step_1',            
        title: 'Popover title',         
        content: 'Popover content',    
        placement: 'right-start',      
    },
    {
        element: '#step_2',            
        title: 'Popover title',         
        content: 'Popover content',     
        placement: 'right-start',       
    },
    {
        element: '#step_3',            
        title: 'Popover title',         
        content: 'Popover content',     
        placement: 'right-start',       
    },
];

wt.setSteps(steps);
wt.start();

放置

类似于 Popover JS  的设置。 可选值：top、top-start、top-end、right、right-start、right-end、left、left-start、left-end、bottom、bottom-start、bottom-end、auto

相关链接

• 项目地址：https://votch18.github.io/webtour.js/
• 在线演示：https://www.wenjiangs.com/wp-content/uploads/2022/04/webtour.js-demo/