タブでウィザード作成

タブは、簡単にウィザードのようなインタフェースを作るために使用することができます。 次の例では、ペイン間を移動するのにタブ APIを用いた、次へ/前へ ボタンを使用しています。 また、チェックボックスを設けており、ユーザは次のペインに進みたい場合、チェックしなければなりません。

また、ウィザードを使用するときには、exposing effect 参照できます。 この手のタスクにユーザのフォーカスを移動するための効果的な方法です。

HTML コード

ルート要素として、"wizard" という id を持つ div タグを持っていますが、 それ以外は 最小限のセットアップ に同じです。

<!-- ウィザードのルート要素 -->
<div id="wizard">

	<!-- tabs -->
	<ul class="tabs">
		<li><a href="#" class="w2">Personal info</a></li>
		<li><a href="#" class="w2">Shopping basket</a></li>
		<li><a href="#" class="w2">Review order</a></li>
	</ul>

	<!-- panes -->
	<div class="panes">
		<div> .. the form   .. </div>
		<div> .. the basket .. </div>
		<div> .. the order  .. </div>
	</div>

露出効果

この JavaScript コーディングは、カスタムの背景色（#789）による マスク 効果を可能にします。 この効果は、ルート要素がクリックされたときにアクティブになります。もちろん、この効果は任意であり、容易に取除くことができます。

// ウィザードのコンテナ取得と露出の初期化
	var wizard = $("#wizard").expose({color: '#789', lazy: true});

	// ウィザードの露出を可能にする
	wizard.click(function() {
		$(this).expose().load();
	});

タブ

ここに、タブの設定があります。複雑さは、チェックボックスの動作で決まります。 前への移動を可能にする前に、ユーザが "条件"を受け入れるようにする必要があります。 トリックは、onBeforeClick イベント内で false を返すことです。

// wizard 内に含まれているタブを有効にする
	$("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {

		/* 今、onBeforeClick イベントの中にいる */

		// "条件"チェックボックスが選択さたことを確認する
		var terms = $("#terms");
		if (index > 0 && !terms.get(0).checked)  {
			terms.parent().addClass("error");

			// false が返されたとき、ユーザは次のタブに進むことができないtab
			return false;
		}

		// すべて OK。条件から赤のハイライトを削除する
		terms.parent().removeClass("error");
	});

ナビゲーションボタン

ここは、ナビゲーションボタンのセットアップ方法です。 まず、APIへのハンドルを取得し、次にウィザード内に含まれているボタンへカスタムの click イベントを割り当てます。

// タブ APIへのハンドルを取得する
	var api = $("ul.tabs", wizard).data("tabs");

	// "次のタブ" ボタン
	$("button.next", wizard).click(function() {
		api.next();
	});

	// "前のタブ" ボタン
	$("button.prev", wizard).click(function() {
		api.prev();
	});