Browse By

簡単にチュートリアルが設置できる JQuery Tutorial Plugin

Pocket

簡単にチュートリアルが設置できる JQuery Tutorial Plugin

説明

これはチュートリアルを実現するJQuery Pluginです。デモはこちらです。

使い方

まずはjquery.tutorial.jsをロードしてtutotialを呼び出します。

<link rel="stylesheet" href="./jquery.tutorial.css" >
<script src="./jquery.tutorial.js" ></script>
<script>
	$(function(){
		$("#tutorial").tutorial({
            speed: 300,
            color: "#000000",
            opacity: 0.6,
            message: "#message",
            message_text: [
                "ステップ1<br />最初の要素です。",
                "ステップ2<br />2番目の要素です。",
                "ステップ3<br />3番目の要素です。",
                "ステップ4<br />4番目の要素です。最後です。"
            ],
            target: [".step1",".step2",".step3",".step4"],
            dialog: ".tutorial_dialog",
            dialog_positions: [
                "left: 120px; top: 65px;",
                "right: 120px; bottom: 65px;",
                "left: 120px; top: 65px;",
                "right: 120px; bottom: 65px;"
            ],
            tutorial: "#tutorial",
            btn_open: "#btn-open",
		});
	});
</script>

targetに配列で指定されたclassをhtmlの要素に追加します。
上記の場合はstep1〜step4です。

ダイアログの設置

下記ダイアログの記述をページのどこかに設置してください。
記述はdisplay:none;で非表示としておきます。

    <div class="tutorial" id="tutorial" style="display:none;">
        <div class="tutorial_dialog" style="left: 120px; top: 65px;">
            <div id="message" style=""></div>
            <div class="btnArea">
                <div class="btn"><a href="javascript:void(0);" class="uiButton s back" id="btn-close">閉じる</a></div>
                <div class="btn" id="btn-prev"><a href="javascript:void(0);" class="btn btn-default prev tutorial_disabled">戻る</a></div>
                <div class="btn" id="btn-next"><a href="javascript:void(0);" class="btn btn-default next">次へ</a></div>
            </div>
            <div class="pageArea" id="pageArea"></div>
        </div>
        <div class="tutorial_overlay top" style="z-index: 100;"><div class="inner"></div></div>
        <div class="tutorial_overlay left" style="z-index: 100;"><div class="inner"></div></div>
        <div class="tutorial_overlay right" style="z-index: 100;"><div class="inner"></div></div>
        <div class="tutorial_overlay bottom" style="z-index: 100;"><div class="inner"></div></div>
    </div>

後はmessage_textに指定された文章が順に表示されます。
ダイアログのデザインを変更したい場合はjquery.tutorial.cssを修正してください。

オプション

プラグインのオプションは以下のとおりです。

speed: 300,                // ウィンドウが切り替わる速度
color: "#000000",          // フォーカスされた要素以外の背景色
opacity: 0.6,              // フォーカスされた要素以外の背景の透過度
message: "#message",       // メッセージが表示される場所
message_text: [            // メッセージのテキスト
    "step1<br />step1.",
    "step2<br />step2.",
    "step3<br />step3.",
    "step4<br />step4."
],
target: [".step1",".step2",".step3",".step4"],    // フォーカスする要素
dialog: ".tutorial_dialog",    // チュートリアルのダイアログ
dialog_positions: [            // チュートリアルダイアログの位置
    "left: 250px; top: 65px;",
    "left: 250px; top: 65px;",
    "left: 250px; top: 65px;",
    "left: 250px; top: 65px;"
],
tutorial: "#tutorial",    // チュートリアルダイアログ本体
btn_open: "#btn-open",    // 開始ボタン
btn_next: "#btn-next",    // 次のフォーカスへ
btn_prev: "#btn-prev",    // 前のフォーカスへ
btn_close: "#btn-close",  // チュートリアル終了
pager: "#pageArea"        // フォーカスする要素数と現在のページ

詳しくはデモをご確認ください。
http://js.marooon.com/jquery/jquery-tutorial/example.html

github – https://github.com/marooon/jquery-tutorial.git

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>