吹き出し型のツールチップ「grumble.js」を使用してWebサイトツアーを実装するjQueryプラグイン「Crumble」

タイトル長いですね。fukasawaです。こんにちは。

今回ご紹介するのは、吹き出し型のツールチップを表示するjQueryプラグインgrumble.js

…を使ってWebサイトツアーを実装するjQueryプラグイン「Crumble」です。
Webサイトツアーを実装するプラグインはいろいろとありますが、ポップな感じに仕上げたいときに使えるかもしれません。

公式サイトでデモが見れます。

• Crumble

使い方

1. 必要なcss、jsを読み込みます。

<link rel="stylesheet" href="./css/grumble.min.css">
<link rel="stylesheet" href="./css/crumble.css">
…
<script src="./js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.grumble.min.js" type="text/javascript"></script>
<script src="./js/jquery.crumble.min.js" type="text/javascript"></script>

• Crumbleをダウンロードすると既に「jquery.grumble.min.js」が含まれているのですが、それを使うとうまく動かないようなので（GitHub）から最新のものをダウンロードし、置き換えてください。

2. ツールチップを表示する要素にクラスをつけます。(クラス名は任意です)

	<div class="one">ステップ１</div>
	<div class="two">ステップ２</div>
	<div class="three">ステップ３</div>

3. ol要素を使用し、各ステップ毎にツールチップに表示する内容を定義します。
　　・ol要素にidを付加し、display:noneで非表示にしておく
　　・data-target属性でどの要素に対しツールチップを表示するか指定

<ol id="tour" style="display: none;">
<li data-target=".one" data-angle="140" data-options="distance:20">
<p>Step.1</p>
<p>ひとつめのツールチップ</p>
</li>
<li data-target=".two" data-angle="180" data-options="distance:20">
<p>Step.2</p>
<p>ふたつめのツールチップ</p>
</li>
<li data-target=".three" data-angle="70" data-options="distance:20">
<p>Step.3</p>
<p>みっつめのツールチップ</p>
</li>
</ol>

data-target(必須)	どの要素に対しツールチップを表示するかを指定
data-angle	ツールチップの向きを指定（0-360）
data-options	「grumble.js」のオプションをセミコロン区切りで指定

4. ol要素のjQueryオブジェクトに対し.crumble()を実行すると、webサイトツアーが開始されます。

 $(function() {
	$('#tour').crumble();
});

• HTMLのDOCTYPE宣言を忘れると、自動スクロールが動かないので注意です。

オプション

.crumble()を実行する際、引数にオプションを指定することができます。

（参考:https://github.com/tommoor/crumble#options）

scrollSpeed	自動スクロールのスピード(fast,normal,slow)
grumble	「grumble.js」のオプション
onStep	ステップ毎に呼ばれるコールバック関数
onStart	ツアー開始時に呼ばれるコールバック関数
onFinish	ツアー終了時に呼ばれるコールバック関数