Web頁面用戶分步操作引導插件——driver.js

介紹

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是一個非常值得使用的插件，對於一個系統，對於一個新用戶而言，有一個簡單的步驟引導可以更加快速的熟悉接下來的操作功能！

 

 

喜歡這篇文章？歡迎打賞~~