新手指引交互 JS 工具库 Driver.js,附带使用方法

今天给大家推荐一个可以轻松实现新手指引交互的 Javascript 工具库 Driver.js

image-20220527204812765

一个轻量级(~4kb gzipped)但功能强大的 JavaScript 引擎,可帮助您推动用户对页面的关注。

一些示例用例可以创建强大的功能介绍、号召性用语组件、焦点转移器等。

image-20220527204916153

安装

Driver.js 支持通过 npm 或 yarn 来安装,比如:

yarn add driver.js
npm install driver.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">

使用方法

最简单的使用方法是高亮突出一个元素,只要给一个 CSS 选择器即可:

const driver = new Driver();
driver.highlight('#create-post');

调整弹出框的位置:

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // 位置支持设置为 left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

上面这些都是小打小闹,新手引导交互里最常用的就是包含多个步骤的引导,用户可以一步一步地了解功能,实现这样的效果也很简单:

const driver = new Driver();
// 定义步骤
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      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 是一个免费的 javascript 工具库,作者是 Kamran,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用,也可以用在商业项目上。

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容