官方文檔

github

DEMO

// 引入introJs后introJs().goToStep(1).setOptions({prevLabel: "上一步",nextLabel: "下一步",skipLabel: "跳過(guò)",doneLabel: "結(jié)束", tooltipPosition: 'bottom', // 引導(dǎo)說(shuō)明框相對(duì)高亮說(shuō)明區(qū)域的位置 |tooltipClass: '', // 引導(dǎo)說(shuō)明文本框的樣式highlightClass: '', // 說(shuō)明高亮區(qū)域的樣式exitOnEsc: true, // 是否使用鍵盤Esc退出exitOnOverlayClick: true, // 是否允許點(diǎn)擊空白處退出showStepNumbers: true, // 是否顯示說(shuō)明的數(shù)據(jù)步驟keyboardNavigation: true, // 是否允許鍵盤來(lái)操作showButtons: false, // 是否按鍵來(lái)操作showBullets: true, // 是否使用點(diǎn)點(diǎn)點(diǎn)顯示進(jìn)度showProgress: false, // 是否顯示進(jìn)度條scrollToElement: true, // 是否滑動(dòng)到高亮的區(qū)域// overlayOpacity: 0.8, // 遮罩層的透明度positionPrecedence: ["bottom", "top", "right", "left"], // 當(dāng)位置選擇自動(dòng)的時(shí)候，位置排列的優(yōu)先級(jí)disableInteraction: false, // 是否禁止與元素的相互關(guān)聯(lián)hintPosition: 'top-middle', // 默認(rèn)提示位置hintButtonLabel: 'Got it' // 默認(rèn)提示內(nèi)容}).oncomplete(function () {// 點(diǎn)擊跳過(guò)按鈕后執(zhí)行的事件}).onexit(function () {// 點(diǎn)擊結(jié)束按鈕后， 執(zhí)行的事件}).start();

在html加入屬性? data-step 和 data-intro簡(jiǎn)介?data-hint提示

<div data-step="1" data-intro="步驟1!"></div> <div data-step="2" data-intro="步驟2!"></div>

?

總結(jié)

以上是生活随笔為你收集整理的intro.js新手引导的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。