driver.js：Web页面用户分步操作引导插件

Vedu • 2021-03-09 07:29 • 资源分享 • 阅读 1721

介绍

driver.js是一个网页端的用户操作分步引导操作，可以在整个页面上引导用户操作，用这种方式来引导用户在进入页面后的操作，以便于用户更快的熟悉系统功能！

Github

https://github.com/kamranahmedse/driver.js

特性

driver.js与所有主要浏览器兼容，可以用于任何覆盖需要。功能介绍、焦点转移、行动要求只是几个例子。

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

在最简单的情况下，它将画布放在整个页面的顶部，然后剪切要高亮显示的元素上的部分，并在高亮显示、高亮显示或取消高亮显示元素时为您提供多个挂钩，使其高度可定制。

安装使用

yarn add driver.js
npm install driver.js

引入

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

es6

import Driver from \'driver.js\';
import \'driver.js/dist/driver.min.css\';

突出显示单个元素

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

Popover和突出显示

可以使用popover在高亮显示的元素旁边显示其他详细信息。

const driver = new Driver();
driver.highlight({
  element: \'#some-element\',
  popover: {
    title: \'Title for the Popover\',
    description: \'Description for it\',
  }
});

定位Popover

默认情况下，会自动为popover找到合适的位置并显示它。可以使用“position”属性覆盖它。

const driver = new Driver();
driver.highlight({
  element: \'#some-element\',
  popover: {
    title: \'Title for the Popover\',
    description: \'Description for it\',
    position: \'left\',
    //还可以使用offset
    offset: 20,
  }
});

最基本的完整创建功能介绍

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();

等等后续可访问官方的demo

API

driver.js定义

const driver = new Driver({
  className: \'scoped-class\',        
  animate: true,                    
  opacity: 0.75,                   
  padding: 10,                     
  allowClose: true,                
  overlayClickNext: false,          
  doneBtnText: \'Done\',              
  closeBtnText: \'Close\',           
  stageBackground: \'#ffffff\',     
  nextBtnText: \'Next\',             
  prevBtnText: \'Previous\',          
  showButtons: false,              
  keyboardControl: true,            
  scrollIntoViewOptions: {},        
  onHighlightStarted: (Element) => {}, 
  onHighlighted: (Element) => {},      
  onDeselected: (Element) => {},       
  onReset: (Element) => {},            
  onNext: (Element) => {},                    
  onPrevious: (Element) => {},               
});

步骤定义

const stepDefinition = {
  element: \'#some-item\',       
  stageBackground: \'#ffffff\',   
  popover: {                    
    className: \'popover-class\', 
    title: \'Title\',             
    description: \'Description\', 
    showButtons: false,         
    doneBtnText: \'Done\',        
    closeBtnText: \'Close\',      
    nextBtnText: \'Next\',        
    prevBtnText: \'Previous\',   
  },
  onNext: () => {},             
  onPrevious: () => {},         
};

const driver = new Driver(driverOptions);
driver.defineSteps([
    stepDefinition1,
    stepDefinition2,
    stepDefinition3,
    stepDefinition4,
]);

总结

driver.js是一个非常值得使用的插件，对于一个系统，对于一个新用户而言，有一个简单的步骤引导可以更加快速的熟悉接下来的操作功能！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/21775.html

driver.js：Web页面用户分步操作引导插件

介绍

Github

特性

安装使用

API

总结

相关推荐

发表评论