intro.js是一個(gè)用于制作網(wǎng)頁引導(dǎo)效果的js插件，為您的項(xiàng)目提供分步指南，更好地介紹網(wǎng)站和功能。用法也簡(jiǎn)單。

• 原文來源：詳情
• 項(xiàng)目介紹：Github
• 項(xiàng)目下載：Github
• 使用文檔：詳情

• 使用示例：詳情

1.在需要的頁面添加引用

• intro.js
• introjs.css

這兩個(gè)文件已經(jīng)足夠，但是文件夾themes中是不同的樣式，如果需要也可以引入喜歡的樣式

文件夾example中是demo，大家也可以照葫蘆畫瓢

2.參數(shù)說明

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

只需要在需要引導(dǎo)說明的標(biāo)簽上加入如下屬性，插件就自動(dòng)將當(dāng)前標(biāo)簽區(qū)域高亮選中，另外附加說明

<div data-step="1" data-intro="這里是步驟1!"></div>
<div data-step="2" data-intro="這里是步驟2!"></div>
<div data-step="3" data-intro="這里是步驟3!"></div>

另外還有兩個(gè)比較有用的方法

oncomplete 選中“跳過”按鈕回調(diào)方法

onexit選中“結(jié)束”按鈕回調(diào)方法

一般在頁面加載時(shí)調(diào)用即可：

//訪問引導(dǎo)頁
function guide() {
    introJs().setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳過",
        doneLabel: "結(jié)束"
    }).oncomplete(function () {
        //點(diǎn)擊跳過按鈕后執(zhí)行的事件
    }).onexit(function () {
        //點(diǎn)擊結(jié)束按鈕后， 執(zhí)行的事件
    }).start();
}

如何使用

Intro.js可以通過三個(gè)簡(jiǎn)單的步驟添加到您的站點(diǎn)中：

1）在頁面中添加intro.js和introjs.css（或用于生產(chǎn)的最小版本）。使用introjs-rtl.min.css的從右到左語言支持。

CDN托管文件位于jsDelivr（單擊“顯示更多”）和cdnjs處。

2）將data-intro和添加data-step到您的HTML元素中。要添加提示，您應(yīng)該使用data-hint屬性。

例如：

<a  data-intro='Hello step one!'></a>

在這里查看所有屬性。

3）調(diào)用此JavaScript函數(shù)：

introJs().start();

（可選）傳遞一個(gè)參數(shù)introJs以限制顯示部分。

例如?introJs(".introduction-farm").start();，僅對(duì)帶有的元素運(yùn)行介紹class='introduction-farm'。

用于：

Intro.js具有許多用于不同用途的包裝器。請(qǐng)?jiān)L問文檔以獲取更多信息。

注意

文件夾example中是demo，大家也可以照葫蘆畫瓢

商業(yè)牌照

如果要將Intro.js用于商業(yè)應(yīng)用程序，主題或插件，則商業(yè)許可是適當(dāng)?shù)脑S可。使用此選項(xiàng)，您的源代碼將保持專有。在introjs.com上購買商業(yè)許可證