推薦一個頁面引導(dǎo)庫 driver.js
頁面引導(dǎo)功能是 web 開發(fā)中常見的一個功能。通過頁面引導(dǎo)功能，你可以讓用戶第一時間熟悉你的頁面功能。今天給大家推薦一個頁面引導(dǎo)庫 driver.js。
1 簡介
我們來看下如何使用 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()
可以看到僅僅十幾行代碼，你就可以完成頁面引導(dǎo)功能的編寫。
首先引入 driver.js 庫及其 css 文件
然后調(diào)用 driver 函數(shù)構(gòu)造一個 driverObj 對象，通過 steps 參數(shù)編寫你的引導(dǎo)步驟，element 為需要高亮的 DOM 元素或 DOM 對應(yīng)的 CSS 選擇器
最后調(diào)用 driverObj 的 drive 方法開啟頁面引導(dǎo)
讓我們來看下效果：
2 簡單體驗
接下來我們自己上手體驗下，先來看下最終實現(xiàn)的效果。
?<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://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5efaea22e8794a31afe9f238109e6a90~tplv-k3u1fbpfcp-watermark.image?" />
? ?<div class="crocodile1"></div>
? ?<div class="koala1"></div>
?</div>
html 內(nèi)容包括一個開始按鈕和漫畫區(qū)域內(nèi)容。
?#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;
?}
樣式這塊主要是將要高亮的區(qū)域定位出來。
?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 完成引導(dǎo)步驟編寫即可。
3 主題定制
driver.js 支持主題定制功能，你可以修改企氣泡卡片的樣式。
主題定制有支持兩種方式
初始化時傳入 popoverClass，基于這個類名調(diào)整氣泡卡片的樣式
?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 {}
直接修改氣泡彈窗的 DOM 元素，在 onPopoverRender 這個鉤子中進行操作
?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: [
? ? ?// ..
? ?]
?})
上述代碼在底部按鈕區(qū)域加了個“返回第一頁”的按鈕。
最后看下效果：
4 小結(jié)
driver.js 簡單易上手，同時支持所有主流瀏覽器，也支持移動端展示。除了頁面引導(dǎo)外，這個庫也支持簡單地對一個元素進行高亮，突出你想展示的內(nèi)容。
最后 driver.js 支持很多配置能力，更多可以到
