サイトのチュートリアルを表示できるJavaScript「jQuery Joyride Feature Tour Plugin」

サイトの使い方を見せるのはFacebookなども取り入れている昨今注目の方法です。
jQuery Joyride Feature Tour Pluginでは簡単にそれを実行でき、チュートリアルに利用できそうです。

使用方法

jQuery Joyride Feature Tour Pluginからファイル一式をダウンロード。

<link rel="stylesheet" href="joyride-1.0.2.css" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.joyride-1.0.2.js"></script>
次にチュートリアルの内容を記述します。

  <ol id="id名">
    <li data-id="step1" data-text="Next: Step1">
      <p>STEP1はここはここです</p>
    </li>
    <li data-id="step2" data-text="Next: Step2">
      <p>STEP2はここはここです</p>

    </li>
    <li data-id="step3" data-text="Close">
      <p>終わりです</p>

    </li>
  </ol>
data-idは後述する対応STEPのidを、data-textには次に行くボタンのラベルを書きます。
上記を記述したら、STEPごとにidを記述します。

<div id="step1">内容1</div>
<div id="step2">内容2</div>
<div id="step3">内容3</div>
そして最後に設定を書いて完成です。

<script>
$(window).load(function() {
	$(this).joyride({
	  'tipLocation': 'bottom', //吹き出しを出す場所
      'scrollSpeed': 300, //スクロールスピード
      'tipAnimation': 'fade', //吹き出しのアニメーション（特にアニメーションのないpopもあり）
      'tipAnimationFadeSpeed': 500, //フェードスピード
      'cookieMonster': false, //cookieを使用するか（使用する場合 'cookieName': ***,という指定が可能です）
      'tipContent': '#id名' //チュートリアルのolに記述したid名
	});
});
</script>

サンプル

  1. 使用方法

  2. いかがでしたか？


Javascriptサンプルページ一覧
skuare.net