推薦一個頁面引導庫 driver-js

頁面引導功能是 web 開發中常見的一個功能。通過頁面引導功能，你可以讓用戶第一時間熟悉你的頁面功能。今天給大家推薦一個頁面引導庫 driver.js。

簡介

driver.js 是一款用原生 js 實現的頁面引導庫，上手非常簡單，體積在 gzip 壓縮下僅僅 5kb。

我們來看下如何使用 driver.js

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
    { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
    { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
    { element: '.footer', popover: { title: 'Title', description: 'Description' } },
  ]
});

driverObj.drive()

可以看到僅僅十幾行代碼，你就可以完成頁面引導功能的編寫。

  1. 首先引入 driver.js 庫及其 css 文件

  2. 然後調用 driver 函數構造一個 driverObj 對象，通過 steps 參數編寫你的引導步驟，element 爲需要高亮的 DOM 元素或 DOM 對應的 CSS 選擇器

  3. 最後調用 driverObj 的 drive 方法開啓頁面引導

讓我們來看下效果：

簡單體驗

接下來我們自己上手體驗下，先來看下最終實現的效果。

<p>《I LOVE YOU TOO》。漫畫作者 CHOW HON LAM，馬來西亞漫畫家、插畫家。</p>
<div>
  <button id="story1">故事1</button>
</div>
<div id="tour1" class="tour">
  <img width="500" height="auto" src="https://wzy-picture.oss-cn-beijing.aliyuncs.com/images/p118850804-3.jpg" />
  <div class="crocodile1"></div>
  <div class="koala1"></div>
</div>

html 內容包括一個開始按鈕和漫畫區域內容。

#tour1 {
  position: relative;
  display: none;
  margin-top: 32px;
}

.crocodile1 {
  position: absolute;
  left: 245px;
  top: 35px;
  width: 140px;
  height: 130px;
}

.koala1 {
  position: absolute;
  left: 145px;
  top: 130px;
  width: 100px;
  height: 30px;
}

樣式這塊主要是將要高亮的區域定位出來。

const driver = window.driver.js.driver;

$('#story1').click(() => {
  $('#tour1').css('display', 'inline-block')
  const driverObj = driver({
    showProgress: true,
    allowClose: false,
    steps: [
      { element: '.crocodile1', popover: { description: '這裏有一隻鱷魚', side: "left", align: 'start' } },
      { element: '.koala1', popover: { description: '這裏有三隻考拉', side: "bottom", align: 'start' } },
      { element: '#tour1', popover: { description: '這是他們的故事《另一把雨傘》', side: "bottom", align: 'start' } }
    ]
  });
  driverObj.drive()
})

最後使用 driver.js 完成引導步驟編寫即可。

源碼地址：I Love You Too （https://code.juejin.cn/pen/7261987309015269437）

主題定製

driver.js 支持主題定製功能，你可以修改企氣泡卡片的樣式。

主題定製有支持兩種方式

const driverObj = driver({
  popoverClass: 'my-custom-popover-class'
})

// 氣泡卡片各個元素的 class
.driver-popover {}
.driver-popover-arrow {}
.driver-popover-title {}
.driver-popover-description {}
.driver-popover-close-btn {}
.driver-popover-footer {}
.driver-popover-progress-text {}
.driver-popover-prev-btn {}
.driver-popover-next-btn {}
const driverObj = driver({
  onPopoverRender: (popover, { config, state }) => {
    const firstButton = document.createElement("button");
    firstButton.innerText = "Go to First";
    popover.footerButtons.appendChild(firstButton);

    firstButton.addEventListener("click", () => {
      driverObj.drive(0);
    });
  },
  steps: [
    // ..
  ]
})

上述代碼在底部按鈕區域加了個 “返回第一頁” 的按鈕。

最後看下效果：

源碼地址：I Love You Too2  (https://code.juejin.cn/pen/7262582969524486185)

小結

driver.js 簡單易上手，同時支持所有主流瀏覽器，也支持移動端展示。driver.js 除了可以作爲頁面引導使用，還可以簡單對一個元素進行高亮，突出你想展示的內容。

driver.js 除了上述的示例外，還支持很多配置能力，更多可以到官網查看示例。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/W62N-vmGNA7p79TWiEvq9g

猜你喜歡