用法

載入資源

載入兩個(gè)文件，intro.js和introjs.css

使用

您需要一個(gè)開關(guān)

<a href="javascript:void(0);" onclick="javascript:introJs().start();">點(diǎn)擊查看指引</a>

配置

有兩個(gè)屬性需要配置

• data-step：顯示順序（純數(shù)字）
• data-intro：提示文本（HTML）

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

補(bǔ)充

• data-position：分步引導(dǎo)的內(nèi)容所在的位置，
• 如右側(cè)：right 左側(cè)：left 上方：top 下方：bottom

簡單的演示

查看演示

添加圖片

單純的文本提示著實(shí)單調(diào)，加上圖片

  <div data-step="1" data-intro="這里是步驟1!<img src=./img/npcink.png>">2</div>

查看演示

如上所示，在data-intro提示文本中，可以使用HTML標(biāo)簽

實(shí)戰(zhàn)

上面這些都太理想了，在實(shí)際運(yùn)用中，怎么會(huì)這么簡單，先來看一段經(jīng)典的HTML代碼：

<div class="n-210105-3">
    <div class="n-bg">
      <div class="n-bg-d">
        <div class="n-main">
          <span class="n-ico">
            @@@
            <p>專屬內(nèi)容</p>
          </span>
          <p class="n-meat">您需要入圈之后才能查看帖子內(nèi)容</p>
          <div class="n-button">現(xiàn)在加入</div>
        </div>
      </div>
    </div>
  </div>

一個(gè)問題，怎么給我們需要的標(biāo)簽添加屬性呢？

我們可以通過下面這個(gè)JS方法來給指定的標(biāo)簽添加屬性

document.querySelector(".n-ico p").setAttribute('data-step', "1"); 

實(shí)戰(zhàn)演示

點(diǎn)擊查看指引

專屬內(nèi)容

您需要入圈之后才能查看帖子內(nèi)容

現(xiàn)在加入

補(bǔ)充

添加其他的引導(dǎo)樣式主題

在您文章開頭您下載的資源中，有一個(gè)名為themes的文件夾，里面的CSS文件就是主題，載入其中不同的CSS文件，即可實(shí)現(xiàn)不同的外觀。

觸發(fā)引導(dǎo)的同時(shí)觸發(fā)一個(gè)JS函數(shù)

<a onclick="n_start();javascript:introJs().start();">使用指南</a>

給指定的class添加樣式

document.querySelector(".po-topic-circle").style.display = "";