今日の人気記事

  1. ボックスからはみ出たテキストをドットに変換「dotdotdot」
  2. 同じ内容の入力フォームを追加・削除「Repeater」
  3. 入力フォームのフォーカスを自動でタブ移動「Autotab」
  4. 3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」
  5. アンカータグに確認やポップアップ効果を追加「A+」

Webサイトの使い方ツアーを実装「TourTip」

スポンサーリンク

Webサイトの使い方ツアーを実装するプラグイン「TourTip」を紹介します。

jQueryプラグイン「TourTip」

このプラグインを使えば、ツールチップ(吹き出し)を使ったWebサイトの使い方ツアーを簡単に実装することができます。

スポンサーリンク

デモの「使い方ツアー」をご覧ください。

「TourTip」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="TourTipのデモでーす。">
<title>TourTip - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="tinytools.tourtip.min.js"></script>
<link rel=" stylesheet" type="text/css" href="css/tinytools.tourtip.min.css">
<style>
#demo3 {
  margin: 20px;
  background-color: red;
  width:300px;
  height:300px;
}
</style>
</head>
<body>
<h1 id="demo1">TourTipのデモです。</h1>

<p id="demo2">▼ボタンをクリックするとツアーがはじまります。</p>
<button type="button" id="StartTour">ツアーをスタート</button>

<div id="demo3"></div>

<script>
$(document).ready(function () {
  $("#demo1").tourTip({
    title: "ツアーのタイトルだよ~",
    description: "説明",
    previous: true,
    position: 'bottom'
  });
  $("#demo2").tourTip({
    title: "ツアー方法の説明",
    description: "ボタンをクリック",
    previous: true,
    position: 'bottom'
  });
  $("#demo3").tourTip({
    title: "赤",
    description: "赤の画像だよ~。",
    previous: true,
    position: 'right'
  });
  $("#StartTour").click(function(){
    $.tourTip.start();
  });
});
</script>
</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» TourTip

スポンサーリンク

関連記事(一部広告含む)