網站引導頁插件intro.js 的用法

Intro.js 是用於向首頁使用網站或者移動應用添加漂亮的分布指南效果，引導用戶的js框架。支持使用鍵盤的前后方向鍵導航，使用 Enter 和 ESC 鍵推出指南。

Intro.js 是 GitHub 上的開源項目，目前僅支持 Chrome、Firefox、Safari 瀏覽器，其它瀏覽器的兼容已加入 Roadmap 中。intro.js.v2.0.rar

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

　　intro.js

　　introjs.css

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

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

2.參數說明

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

只需要在需要引導說明的標簽上加入如下屬性，插件就自動將當前標簽區域高亮選中，另外附加說明

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

另外還有兩個比較有用的方法

oncomplete 選中“跳過”按鈕回調方法

onexit選中“結束”按鈕回調方法

一般在頁面加載時調用即可：

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

效果如下：