はじめてのIntro.js

javascript


実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡

で紹介されていたIntro.jsを動かしてみた。

使い方は至って簡単。

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

をhtmlで指定して、
トリガー部分の設定と
<p onclick="javascript:introJs().start();">; show</p>

紹介したい項目に番号と紹介テキストを追加する↓

  <p data-step="1" data-intro="first step!!" >A</p>
  <p data-step="2" data-intro="second step!!" >B</p>

骨と皮だけだと、

<!DOCTYPE html>
<html>
  <head>
    <link href="./introjs.css" rel="stylesheet">
  </head>
  <body>
    <p onclick="javascript:introJs().start();"> show</p> 
    <p data-step="1" data-intro="first step!!" >A</p>
    <p data-step="2" data-intro="second step!!" >B</p>
    <script type="text/javascript" src="./intro.js"></script>
  </body>
</html>

こんな感じ。

data-positionは不適切な位置をしていると
nextとbackボタンが表示されないので注意。