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

サイトのチュートリアルを表示できる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>

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

sponsors

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

記事作成:
記事URL:

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