HTML コード

HTML構造は、スクロールの最小限の設定に、 次の2つの特別な要素を加えたものと原理的には同じです : "twitter style" でエラーメッセージを表示する #drawer および ユーザが現在参照しているページを表示する #status。

<!-- twitter style "drawer" for displaying validation errors -->
<div id="drawer">[ERROR MESSAGE]</div>
 
<!-- the form -->
<form action="#">
 
  <!-- scrollable root element -->
  <div id="wizard">
 
    <!-- status bar -->
    <ul id="status">
      <li class="active"><strong>1.</strong> Create Account</li>
      <li><strong>2.</strong> Contact Information</li>
      <li><strong>3.</strong> Finalize</li>
    </ul>
 
    <!-- scrollable items -->
    <div class="items">
      <!-- pages -->
      <div class="page">[ Any HTML content ]</div>
      <div class="page">[ Any HTML content ]</div>
      <div class="page">[ Any HTML content ]</div>
    </div>
 
  </div>
</form>

CSS コード

CSSコーディングは、このデモの最も難しい部分です。ここに、全体のデモのスタイリングに使用する scrollable-wizard.cssから取った、最も重要な部 分があります。

/* the root element for scrollable */
	#wizard {
	overflow:hidden;
	position:relative;
}

/* scrollable items */
	#wizard .items {
	width:20000em;
	clear:both;
	position:absolute;
}

/* single scrollable item called ".page" in this setup */
	#wizard .page {
	padding:20px 30px;
	width:500px;
	float:left;
}

/* validation error message bar. positioned on the top edge */
	#drawer {
	overflow:visible;
	position:fixed;
	left:0;
	top:0;

スクロールの設定

ここは、簡単な部分です。自明です。

var root = $("#wizard").scrollable();

入力検証ロジック

ウィザードには、必須フィールドが空白でないことをチェックするだけの、簡単な検証ロジックが含まれています。 それは、li.required 要素内にネストした入力フィールドをチェックし、値を持っているかを確認し ます。空白文字は認められません。適切な検証ロジックを実装したい場合は、 Validator ツールを使用してください。

何をしているかが分るように、多くのコメントを加えております。 効果は非常に有益ですが、"drawer" ロジックは非常に簡単な1行だけである点に注目してください。

// 必要な変数
var api = root.scrollable(), drawer = $("#drawer");

// 検証ロジックは onBeforeSeek コールバック内で行われる
api.onBeforeSeek(function(event, i) {

	// 1ステップ戻るので検証の必要はない
	if (api.getIndex() < i) {

	   // 1. 現在のページを取得
	   var page = root.find(".page").eq(api.getIndex()),

		 // 2. .. ページ内の全ての必須フィールド
		 inputs = page.find(".required :input").removeClass("error"),

		 // 3. .. どれが空か
		 empty = inputs.filter(function() {
		 return $(this).val().replace(/\s*/g, '') == '';
		 });

	   // 空のフィールドがあれば、その時に
	   if (empty.length) {

			 // 引き出しを下にスライド
			 drawer.slideDown(function()  {

			 // フラッシュ効果に色をつける
			 drawer.css("backgroundColor", "#229");
			 setTimeout(function() { drawer.css("backgroundColor", "#fff"); }, 1000);
			 });

			 // 空と必須フィールドへCSSクラス名 "error" を追加
			 empty.addClass("error");

			 // falseを返してスクロールのシークをキャンセル
			 return false;

	   // 全て問題なし
	   } else {
			 // 引出しを隠す
			 drawer.slideUp();
	   }
	}

	// ステータスバーの更新
	$("#status li").removeClass("active").eq(i).addClass("active");

});
                     

最終調整

まだ全体の設定に、1つの最適化を行う必要があります。ユーザーが、TABキーを使用してフォームフィールドを 進む場合、隣のタブに進む前にフォームページが検証されていることを確認しなければなりません。 これは、次のJavaScriptで達成することができます:

// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
  if (e.keyCode == 9) {
	  // seeks to next tab by executing our validation routine
	  api.next();
	  e.preventDefault();
  }
});