360SDN.COM

首页/JQuery/列表

Driver.js – 页面分步引导JavaScript

来源:  2018-09-03 16:02:17    评论:0点击:

通过 Driver.js ,你可以突出显示页面上的项目,以吸引用户的注意力。你也可以在网站改版后,使用它来引导用户展示新功能。

下载 演示 GitHub

Driver.js 是一个轻量级(~ 4kb gzip),无需依赖但功能强大的原生 JavaScript 。兼容所有主流浏览器,可帮助你将用户的注意力集中在页面上。

特色功能:

  • 突出显示页面上的任何任何项目
  • 锁定用户交互
  • 创建功能介绍
  • 为用户添加聚焦器
  • 高度可定制 – 可在任何地方使用,可覆盖
  • 界面友好 – 可通过按键控制
  • 轻量级 – gzip 压缩后只有约4kb
  • 在所有主流浏览器中保持一致的行为
  • 免费用于个人和商业用途

安装

无论你喜欢哪种方式,你都可以使用 yarn 或 npm 进行安装。

yarn add driver.js
npm install driver.js

或者直接在文件中引入它。


用法

突出显示单个元素

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',
  }
});

此外, titledescription 也可以使用 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 方法隐藏按钮并以编程方式控制介绍。

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权