想要用户快速了解网站,不妨试试这个库吧~

前言

我们经常浏览网站的时候就会看到这样的效果,

通过这样的漫游式引导,可以快速帮助用户了解产品,页面功能模块等等.

那么我今天介绍的就是这样一个js库,定制性强,上手快,轻量级.drive.js

介绍

Driver.js 是一个轻量级的、易于使用的JavaScript库，用于创建平滑的、交互式的页面内引导或教程。它通过高亮页面元素并显示步骤说明来帮助用户了解如何使用网站或应用程序。以下是该库的一些关键特性和概述：

1. 简单易用：Driver.js 提供了一个简单直观的API，可以快速集成到任何项目中。
2. 可定制性：库允许开发者自定义动画、样式和步骤内容，以适应不同的设计需求。
3. 轻量级：与其他 +12kb 压缩的库相比，仅 5kb gzip
4. 响应式：引导步骤会根据页面元素的位置自动调整，确保在不同设备和屏幕尺寸上都能正常显示。
5. 事件驱动：支持各种事件，如步骤开始、结束、跳过等，使得开发者可以轻松地添加自定义逻辑。
6. 键盘导航：用户可以使用键盘快捷键来控制引导流程，提高可访问性。
7. 浏览器兼容性：Driver.js 在所有现代浏览器上都能正常工作，包括Chrome、Firefox、Safari和Edge。

安装

包管理器

根据自己包管理器进行指令安装即可

pnpm add driver.js
or
npm install driver.js

cdn链接

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>

案例学习

其实单独拿出语法来讲会很枯燥,而且大部分人都想着快速入手,那么编写一个小型DEMO是再好不过的方式. 那么下面我将会带着大家一点一点去搭建一个小型DEMO,然后快速地熟悉一边driveJS 提供的配置项,以便大家快速地将drivejs集成到自己的项目当中.

那么废话不多说,我们直接开始吧!

大家看一下 下面的布局,想必大家都应该会吧!

静态页面布局搭建

为了省去大家手敲代码的时间,我直接将html代码放在这里了.

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        .container {
            display: flex;
            width: 100%;
            height: 100%;
        }

        /* aside */
        .aside {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: 100%;
            background-color: #7dfaa384;
        }

        /* main */
        .main {
            width: calc(100% - 300px);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .main .header {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(102, 149, 250, 0.594);
        }

        .main .content {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(100% - 100px);
            background-color: rgba(250, 102, 188, 0.594);
        }

        .startGuide{
            width: 150px;
            height: 50px;
            border-radius: 15px;
            background-color: #000;
            color: #fff;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            transition: all 0.5s;
            border: none;

        }
        .startGuide:hover{
            background-color: #4d70ff;
        }

html

    <div class="container">
        <div class="aside">
            侧边区域
        </div>

        <div class="main">
            <div class="header">头部区域</div>
            <div class="content">
                <button class="startGuide">点击开始导览</button>
            </div>
        </div>
    </div>

drivejs引入使用

其实官网给的配置项有很多,但是我们有些并不会用到,我这里只是将常用的给拿出来进行一个讲解和演示~

基础使用

如果使用CDN, 必须使用window对象中的包: ==> 官网文档

const driver = window.driver.js.driver;

        const driver = window.driver.js.driver;
        const driverObj = driver(
            { 
                steps: [
                    { element: '.aside', popover: { title: '侧边栏', description: '这是侧边栏导航区域' } },
                    { element: '.header', popover: { title: '顶部', description: '这是顶部操作栏' } },
                    { element: '.content', popover: { title: '内容区域', description: '这是内容展示区域' } },
                ]
            }
        );

        document.querySelector('.startGuide').addEventListener('click', () => {
            driverObj.drive();
        });

说明:

• steps: 一个数组，包含了每个引导步骤的详细信息。每个步骤是一个对象，包含了以下属性：

  • element: 一个CSS选择器，指定了要在引导中高亮的页面元素。
  • popover: 一个对象，定义了当用户到达这个步骤时，要显示的弹出框（popover）的标题和描述。

• driverObj.drive() 方法。这个方法启动漫游

就是这么地简单, 在此基础上,我们进行一下个性化配置!

显示进度

 showProgress: true,

此时左下方就出现了步骤显示

自定义进度显示文案

current 和 total:

表示当前progressText 默认文本是 {{current}} of {{total}} 。您可以在 progressText 模板中使用 {{current}} and {{total}} 来显示当前步骤和总步骤。

   progressText: '步骤 {{current}} / {{total}}',

自定义弹框样式

先定义一个样式

我们可以自定义类, 也可以直接覆盖drivejs提供的样式.只需要f12检索当前元素应用的类名,然后复制下来,定义我们自己的样式即可. 如果不生效, 使用!important提高优先级

        .modelStyle{
            background-color: #0c51ff;
            color: #fff;
        }
        .modelStyle .driver-popover-progress-text{
            color: #fff !important;
        }

然后使用popoverClass 即可使用.只适用class定义的类名.

popoverClass:'modelStyle',

此时我们定义的样式已经生效了.

是否允许关闭

有时候我们希望用户一旦开始了漫游必须到最后才可以退出的话, 那么我们就可以开启这个设置

allowClose: false,

设置好之后,点击遮罩层不会关闭, 同时弹框上方也不会出现X号

自定义遮罩层的颜色&不透明度

   // 自定义叠加层的不透明度
    overlayOpacity : 0.5,
   // 自定义叠加层的颜色
   overlayColor: '#B800FF',

自定义按钮上的文本

                //  上一步按钮的文本
                nextBtnText: '下一步',
                //  上一步按钮的文本
                prevBtnText: '上一步',
                // 完成按钮的文本
                doneBtnText: '完成',

去除遮罩层和高亮层的边距

默认下:

使用

stagePadding: 0,

进行去除.

允许键盘导航

// 允许键盘导航
   allowKeyboardControl: true,

设置了true之后, 我���就可以通过键盘的小数字旁边的左右箭头进行控制了.

API总结

还有还多方法和配置项,我已经帮大家整理好了(翻译了官网)

type Config = {
  // 需要高亮显示的步骤数组。当你想要设置产品导览时，应该传入这个。
  steps?: DriveStep[];

  // 是否对产品导览进行动画效果。（默认值：true）
  animate?: boolean;
  // 遮罩颜色。（默认值：黑色）
  // 当你有一个深色背景并希望用浅色背景高亮显示元素时，这个很有用。
  overlayColor?: string;
  // 是否平滑滚动到高亮显示的元素。（默认值：false）
  smoothScroll?: boolean;
  // 是否允许通过点击背景关闭弹出层。（默认值：true）
  allowClose?: boolean;
  // 遮罩的不透明度。（默认值：0.5）
  overlayOpacity?: number;
  // 高亮元素与裁剪区域之间的距离。（默认值：10）
  stagePadding?: number;
  // 高亮元素周围的裁剪区域半径。（默认值：5）
  stageRadius?: number;

  // 是否允许键盘导航。（默认值：true）
  allowKeyboardControl?: boolean;

  // 是否禁用与高亮元素的交互。（默认值：false）
  disableActiveInteraction?: boolean;

  // 如果你想要为弹出层添加自定义类
  popoverClass?: string;
  // 弹出层与高亮元素之间的距离。（默认值：10）
  popoverOffset?: number;
  // 弹出层中显示的按钮数组。默认值为 ["next", "previous", "close"]，用于产品导览，单元素高亮显示时为 []。
  showButtons?: AllowedButtons[];
  // 禁用的按钮数组。这很有用当你想要显示一些按钮，但禁用其中一些。
  disableButtons?: AllowedButtons[];

  // 是否在弹出层中显示进度文本。（默认值：false）
  showProgress?: boolean;
  // 进度文本的模板。你可以在模板中使用以下占位符：
  //  - {{current}}: 当前步骤编号
  //  - {{total}}: 总步骤数
  progressText?: string;

  // 按钮上显示的文本。`doneBtnText` 用于导览的最后一步。
  nextBtnText?: string;
  prevBtnText?: string;
  doneBtnText?: string;

  // 弹出层渲染完成后调用。
  // PopoverDOM 是一个包含弹出层 DOM 元素引用的对象，如按钮、标题、描述、正文、容器等。
  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;

  // 在每个步骤高亮显示前后运行的钩子。每个钩子接收以下参数：
  //   - element: 步骤的目标 DOM 元素
  //   - step: 为该步骤配置的步骤对象
  //   - options.config: 当前的配置选项
  //   - options.state: 驱动器的当前状态
  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;

  // 在驱动器销毁前后运行的钩子。每个钩子接收以下参数：
  //   - element: 当前活动的元素
  //   - step: 为当前活动步骤配置的步骤对象
  //   - options.config: 当前的配置选项
  //   - options.state: 驱动器的当前状态
  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;

  // 在按钮点击时运行的钩子。每个钩子接收以下参数：
  //   - element: 当前步骤的 DOM 元素
  - step: 为该步骤配置的步骤对象
  //   - options.config: 当前的配置选项
  //   - options.state: 驱动器的当前状态
  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
};

大家赶快去试试下~