用戶引導插件driverjs的基本使用以及彈窗樣式修改方法

更新時間：2024年04月18日 09:37:19 作者：卡夫卡的小熊貓

Driver.js是一個強大的、輕量級、使用原生JavaScript引擎開發(fā)的庫,用于在頁面聚焦用戶的關注點,下面這篇文章主要介紹了用戶引導插件driverjs的基本使用以及彈窗樣式修改方法,需要的朋友可以參考下

前言

Driver.js 是一個強大的，輕量級，使用原生 JavaScript 引擎開發(fā)的庫，用于在頁面聚焦用戶的關注點。它支持所有主流瀏覽器，并且可高度自定義。

Driver.js 并不僅僅是一個指南性質的庫，其用戶場景非常廣泛，能夠用于任何需要為頁面構建浮層的情況，譬如當用戶需要與某些元素交互而隱藏其他元素的場景。

特點：

簡單:使用簡單，完全沒有外部依賴
輕量級:與其他庫的壓縮量+12kb相比，壓縮量僅為5kb
高度可定制:擁有強大的API，可以隨心所欲地使用
突出顯示任何內容:突出顯示頁面上的任何(字面上的任何)元素
功能介紹:為您的web應用程序創(chuàng)建強大的功能介紹
焦點移位器:為用戶添加焦點移位器
用戶友好:一切都是由鍵盤控制
TypeScript:用TypeScript編寫
一致的行為:適用于所有瀏覽器
MIT授權:個人免費

安裝

npm install driver.js

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

示例

基本使用

引入 driverjs：

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

創(chuàng)建實例

const driverObj = driver({
    showProgress: true,
    steps: cls,
    showButtons: ["next"],
    popoverClass: "driverjs-theme",
    showProgress: false,
    popoverOffset: 50,
    doneBtnText: "知道了",
    nextBtnText: "知道了",
  });

實例屬性介紹：

className：className用來包裝driver.js彈出窗口
animate：動畫時改變突出顯示的元素
opacity：背景不透明度(0表示只有彈出窗口，沒有覆蓋)
padding：元素到周圍邊緣的距離
popoverOffset：彈窗與元素偏移距離
allowClose：點擊覆蓋是否應該關閉
showProgress：是否顯示彈窗進度
overlayClickNext：它應該移動到下一步疊加點擊
doneBtnText：最后一個按鈕上的文本
closeBtnText：此步驟的關閉按鈕上的文本
nextBtnText：此步驟的下一個按鈕文本
prevBtnText：此步驟的上一個按鈕文本
showButtons：在頁腳不顯示控制按鈕
keyboardControl：允許通過鍵盤控制(escape鍵關閉，箭頭鍵移動)
scrollIntoViewOptions：我們在可能的情況下使用' scrollIntoView() '，如果你想要的話，在這里傳遞它的選項
showButtons：顯示按鈕合集（previous， next， close）
onHighlightStarted：當元素即將突出顯示時調用
onHighlighted：當元素完全高亮顯示時調用
onDeselected：當元素被取消選中時調用
onReset：當覆蓋即將被清除時調用
onNext：在任何步驟移動到下一步時調用
onPrevious：在任何步驟移動到上一步時調用

注意，您在驅動程序（step屬性）定義中提供的所有按鈕選項都可以通過在步驟定義中提供它們來覆蓋特定步驟

step 屬性：

const stepDefinition = {
  element: '#some-item',       
  popover: {                    
    className: 'popover-class',
    title: 'Title',             
    description: 'Description', 
    showButtons: false,         
    closeBtnText: 'Close',      
    nextBtnText: 'Next',       
    prevBtnText: 'Previous',  
    popoverClass: "driverjs-theme",
  }
};

element：要突出顯示的查詢選擇器字符串或節(jié)點
popover

- className：className來包裝這個特定的步驟彈出窗口，除了驅動程序選項中的一般className
- title：彈出窗口上的標題
- description：彈出窗口上的描述信息
- showButtons：在頁腳不顯示控制按鈕
- closeBtnText：此步驟的關閉按鈕上的文本
- nextBtnText：此步驟的下一個按鈕文本
- prevBtnText：此步驟的上一個按鈕文本
- popoverClass：彈窗的自定義樣式名

API 方法

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; 
driver.moveNext();     
driver.movePrevious(); 
driver.start(stepNumber = 0);  
driver.highlight(string|stepDefinition); 
driver.reset(); 
driver.hasHighlightedElement(); 
driver.hasNextStep(); 
driver.hasPreviousStep(); 
driver.preventMove();

const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); 
activeElement.hidePopover();  
activeElement.showPopover();  

activeElement.getNode();

isActivated：檢查驅動程序是否激活
moveNext：移動到步驟列表中的下一步
movePrevious：移動到步驟列表中的上一步
start：開始執(zhí)行定義的步驟
highlight：使用查詢選擇器或步驟定義突出顯示元素
reset：重置覆蓋并清除屏幕
hasHighlightedElement：檢查是否有突出顯示的元素
hasNextStep：檢查是否有下一步要進行
hasPreviousStep：檢查是否有上一步要移動
preventMove：阻止當前移動。有用的' onNext '或' onPrevious '，如果你想；執(zhí)行一些異步任務并手動移動到下一步
getCalculatedPosition：獲取屏幕上當前突出顯示的元素
getCalculatedPosition：獲取活動元素的屏幕坐標
hidePopover：隱藏彈出窗口
showPopover：顯示彈出窗口
getNode：獲取該元素背后的DOM元素

highlight

突出顯示單個元素：

只需傳遞選擇器即可突出顯示單個元素。

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

一個實際的例子是：使用它來調暗背景并突出顯示所需的元素。

突出顯示和彈出框：

可以使用彈出窗口在突出顯示的元素旁邊顯示其他詳細信息

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

定位彈出框：

默認情況下，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`
  }
});

方法導出：

export function dri(cls, type) {
  // cls dialog節(jié)點class, 如果沒有dialog 傳個undefined
  // type  driver步驟,
  // 開啟 這里用不用定時器自己測試,看看去掉之后管不管用
  setTimeout(() => {
    driv(cls, type);
  }, 300);
}

function driv(cls, type) {
  cls.map((item) => {
    item.popover.side = item.popover.side ? item.popover.side : "bottom";
    return item;
  });
  const driverObj = driver({
    showProgress: true,
    steps: cls,
    showButtons: ["next"],
    popoverClass: "driverjs-theme",
    showProgress: false,
    popoverOffset: 50,
    doneBtnText: "知道了",
    nextBtnText: "知道了",
  });

  driverObj.drive();
}

使用：

dri([
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `test`,
        },
      },
      {
        element: ".top-first",
        popover: {
          description: "測試2",
        },
      },
    ]);

彈窗樣式修改

這里介紹三種修改樣式的方式：

通過屬性 popoverClass 來自定義屬性
直接修改插件中的樣式
在 description 屬性中使用模版字符串編寫 html

popoverClass

在 step 數(shù)據(jù) list 列表的屬性中添加 popoverClass 屬性，來自定義屬性

const driver = [
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `test`,
        },
      },
    ]
dri(driver)

.driver-popover .driverjs-theme {
  background-color: #fde047;
  color: #000;
}
.driver-popover .driverjs-theme .driver-popover-title {
    display: none; 
  }

樣式修改

新手引導元素是建立在body下面，所以樣式不能寫在當前vue文件中的scoped中

<style lang="less">
div#driver-popover-item{  // 最外面樣式
  border-radius: 0;
  padding: 0;
  // width: 260px;
  // height: 160px;
  div.driver-popover-title {
    display: none; // 隱藏標題
  }
  div.driver-popover-footer{
    display: flex!important;
    justify-content: center;
    margin-bottom: 20px;
    button.driver-close-btn {
      display: none; // 隱藏關閉按鈕
    }
    .driver-btn-group{
      display: flex;
      justify-content: center;
      button.driver-prev-btn{
      display: none !important; // 隱藏上一步按鈕
      }
      button.driver-next-btn {
        width: 74px;
        height: 34px;
        background: #345eef;
        color: #fff;
        text-shadow: none;
      }
    }
  }
  .driver-popover-description{ // 內容樣式設置
    font-size: 14px;
    margin: 50px auto 29px;
    .step_two {
      display: flex;
      align-items: center;
      justify-content: center;
      .step_first{
        width: 20px;
        height: 20px;
        background: #345eef;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        margin-right: 5px;
        text-align: center;
      }
    }
  }
}
</style>

借助 description 屬性

可以在 step 步驟 list 得屬性 description 使用模板字符串中編寫描述內容的樣式，該方法僅限于描述內容中的樣式修改，前兩個方法適用于整個彈窗的樣式修改。

const driver = [
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `
            <div style='color: red'>222</div>
            <div style='color: red;font-size:0.36rem'>222</div>
            <div style='width:100%; height:0.01rem; background: #4d7ee4'></div>
          `,
        },
      }
]

dri(driver)

總結

到此這篇關于用戶引導插件driverjs的基本使用以及彈窗樣式修改方法的文章就介紹到這了,更多相關用戶引導插件driverjs使用及彈窗樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解bootstrap-fileinput文件上傳控件的親身實踐
這篇文章主要介紹了詳解bootstrap-fileinput文件上傳控件的親身實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
JS中間件設計模式的深入探討與實例分析
這篇文章主要介紹了JS中間件設計模式,結合實例形式分析了JS中間件設計模式功能、原理、應用場景及相關操作注意事項,需要的朋友可以參考下
2020-04-04
微信小程序實現(xiàn)禁止分享代碼實例
這篇文章主要介紹了微信小程序實現(xiàn)禁止分享代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-10-10
風吟的小型JavaScirpt庫 (FY.JS).
此庫非常的迷你壓縮之后只有1.54KB.但是卻有類似jquery的語法有COOKIE操作還有DOM以及AJAX跟綁定事件函數(shù).
2010-03-03
學習JavaScript設計模式(封裝)
這篇文章主要帶領大家學習JavaScript設計模式，其中重點介紹封裝，舉例說明封裝的思想，對封裝進行詳細剖析，感興趣的小伙伴們可以參考一下
2015-11-11
如何在JavaScript中使用localStorage詳情
這篇文章主要介紹了如何在JavaScript中使用localStorage，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
返回頁面頂部top按鈕通過錨點實現(xiàn)(自寫)
用戶在使用系統(tǒng)時，會有很多表單的操作然而很多表單就會很長,所以就需要一個返回頁面頂部的top按鈕啦，于是自己寫了一個，喜歡的朋友可以參考下
2013-08-08
javascript基于DOM實現(xiàn)權限選擇實例分析
這篇文章主要介紹了javascript基于DOM實現(xiàn)權限選擇的方法,實例分析了javascript針對頁面元素的動態(tài)選擇與添加刪除等操作的相關技巧,非常具有實用價值,需要的朋友可以參考下
2015-05-05
js前端加載超大圖片(100M以上)實現(xiàn)秒開的最佳解決方案
前端加載超大圖片時,一般可以采取圖片壓縮,圖片分割,預加載等措施,而對于幾百M或上G的大圖而言,不管對圖片進行怎么優(yōu)化或加速處理,要實現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進行分割,在前端進行拼接實現(xiàn)秒開,需要的朋友可以參考下
2023-10-10
canvas繪制愛心的幾種方法總結(推薦)
下面小編就為大家?guī)硪黄猚anvas繪制愛心的幾種方法總結(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10