前端分布引導插件IntroJs的使用

     在用戶第一次使用網站的時候，一般會提供新手引導的提示，提示用戶重要的功能使用，實現方法比較多，但是有一點，屏幕的自適應問題，大多數自己寫的實現方法無非就是一個div遮罩層，然后再需要指引的位置放置一張圖片等，但是如果屏幕並非一般的常用尺寸，那么就會出現圖片位置不對應的問題，原因就是在css里邊固定了圖片的位置，並沒有自適應。

   IntroJs這個插件是一個開源的分布引導插件，采用綁定div的方式，動態生成提示文字，屏幕縮放以后，相應的提示內容的位置也會隨div變化而變化，唯一的缺點就是對於自定義的樣式（圖片等）支持的不好，可以滿足簡單的需求。

 

   IntroJs簡介

---

      分步指南用於向首頁使用網站或者移動應用添加漂亮的分布指南效果，你在新浪微博、扣扣空間上可能看過類似的。Intro.js 作為一個網站功能操作分布引導插件，支持使用鍵盤的前后方向鍵導航，使用 Enter 和 ESC 鍵退出指南。支持 Chrome、Firefox、Safari 瀏覽器以及部分IE 瀏覽器。

 

         使用方法：

---

          百度下載壓縮文件，然后在項目中引用css和js文件。

<link href="../intro.js-0.5.0/introjs.css" type="text/css" rel="stylesheet" />
<script type="text/javascript"  src="../intro.js-0.5.0/intro.js"></script>

 

          自己修改文件路徑，然后進行配置，這一步是關鍵：

  

introJs().setOptions({
      //對應的按鈕
      prevLabel:"上一步",
      nextLabel:"下一步",
      skipLabel:"跳過",
      doneLabel:"結束",
      //對應的數組，順序出現每一步引導提示
      steps: [
        {
            //第一步引導
            //這個屬性類似於jquery的選擇器， 可以通過jquery選擇器的方式來選擇你需要選中的對象進行指引
            element: '#selfDi',
            //這里是每個引導框具體的文字內容，中間可以編寫HTML代碼
            intro: '<font style="color:#4f98fd;">點擊“自動選取”按鈕，一鍵智能選取 結節層面和位置。 </font>',
            //這里可以規定引導框相對於選中對象出現的位置 top,bottom,left,right
            position: 'right'
        },
          {
              //第一步引導
              element: '.ide',
              //這里是每個引導框具體的文字內容，中間可以編寫HTML代碼
              intro: '<font style="color:#4f98fd;">點擊“手動選取”按鈕， 手動選擇需要檢測的結節層面</font>',
              //這里可以規定引導框相對於選中對象出現的位置 top,bottom,left,right
              position: 'right'
          },
          {
              //第二步引導
              element: '#next',
              intro: '<font style="color:#4f98fd;">點擊“上一張”、“下一張”按鈕，跳轉至不同層面 也可點擊“播放”按鈕，自動播放層面幻燈片</font>',
              position: 'right'
          },
          {
              //第三步引導
              element: '#dicom',
              intro: '<font style="color:#4f98fd;">在方框中點擊並拖拽鼠標畫圈，選取結節位置范圍</font>',
              position: 'left'
          },
          {
              //第三步引導
              element: '#diaButton',
              intro: '<font style="color:#4f98fd;">點擊“開始檢測”按鈕，對選取的全部結節位置 進行智能檢測，等待計算結果</font>',
              position: 'right'
          },
          {
              //第三步引導
              element: '.sign',
              intro: '<font style="color:#4f98fd;">升級VIP用戶，對影像圖進行標注。</font>',
              position: 'right'
          }

      ]

  }).start();

             先說代碼結尾的start()方法，就是啟用分步引導的函數，代碼中給出了實現的代碼，把這段代碼寫在需要調用的地方，何處調用？如何判斷？方法就是讀取cookie，根據cookie的狀態來判定用戶是否第一次使用網站，下一篇會具體寫到，本篇只介紹IntroJs。

     作為測試代碼，可以把上述代碼寫在頁面加載就啟用，測試版本。

     element：需要綁定的具體元素，可以是按鈕、圖片、或者div。

     intro：引導的具體內容，可以寫文字，或者是html代碼

     position：Top、right、bottom、left來指示引導內容的位置。

     代碼中只寫了3步引導，具體根據自己實際項目添加。最后調用代碼：