使用jQuery實現很(hěn)多(duō)很(hěn)有(yǒu)意思的應用效果。我們在很(hěn)多(duō)網站(zhàn)注冊會(huì)員時(shí)，需要填寫注冊表單，包括登錄信息、個(gè)人(rén)聯系信息等，本文将帶您一起體(tǐ)驗jQuery實現的一個(gè)可(kě)以滾動的十分友(yǒu)好的分步注冊向導。

先點擊“demo”按鈕查看演示效果：

XHTML

首先要載入jquery庫和(hé)滾動插件scrollable.js

接着構造html主體(tǐ)結構。

	
	

		
		

			1.創建賬戶
		

		

			2.填寫聯系信息
		

		

			3.完成
		

	

	

		
		

			-----任意html內(nèi)容-----
			

				
			

		

		

			-----任意html內(nèi)容-----
			

				
			

		

		

			-----任意html內(nèi)容-----
			

				
			

		

	

以上(shàng)是一個(gè)注冊表單，注意在三個(gè).page裏可(kě)以填寫任何你(nǐ)想要的html表單內(nèi)容。限于篇幅本文沒有(yǒu)列出表單具體(tǐ)內(nèi)容，詳情可(kě)以查看demo源碼。

CSS

#wizard {border:5px solid #789;font-size:12px;height:450px;margin:20px auto;
width:570px;overflow:hidden;position:relative;}
#wizard .items{width:20000px; clear:both; position:absolute;}
#wizard .right{float:right;}
#wizard #status{height:35px;background:#123;padding-left:25px !important;}
#status li{float:left;color:#fff;padding:10px 30px;}
#status li.active{background-color:#369;font-weight:normal;}
.input{width:240px; height:18px; margin:10px auto; line-height:20px; 
border:1px solid #d3d3d3; padding:2px}
.page{padding:20px 30px;width:500px;float:left;}
.page h3{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px;
 padding-bottom:5px}
.page h3 em{font-size:12px; font-weight:500; font-style:normal}
.page p{line-height:24px;}
.page p label{font-size:14px; display:block;}
.btn_nav{height:36px; line-height:36px; margin:20px auto;}
.prev,.next{width:100px; height:32px; line-height:32px; background:url(btn_bg.gif) 
repeat-x bottom; border:1px solid #d3d3d3; cursor:pointer}

您可(kě)以根據實際應用環境修改css，來(lái)體(tǐ)現不同的外觀。

jQuery

毋庸置疑，和(hé)其他插件一樣，直接調用方法。

$(function(){
	$("#wizard").scrollable();
});

就是這麽簡單，現在可(kě)以通(tōng)過單擊下一步切換步驟了，但(dàn)有(yǒu)問題是導航的步驟标題tab樣式沒有(yǒu)同時(shí)切換，點擊下一步時(shí)應該驗證當前表單輸入的合法性。值得(de)慶幸的是，兩個(gè)方法使得(de)問題變得(de)很(hěn)簡單了。

onSeek：function();當滾動當前page後發生(shēng)的事情，本例中我們要切換tab樣式。

onBeforeSeek：function();滾動之前發生(shēng)的事情，本例中我們要驗證表單。

請(qǐng)看代碼：

$(function(){
	$("#wizard").scrollable({
        onSeek: function(event,i){ //切換tab樣式
			$("#status li").removeClass("active").eq(i).addClass("active");
		},
		onBeforeSeek:function(event,i){ //驗證表單
			if(i==1){
				var user = $("#user").val();
				if(user==""){
					alert("請(qǐng)輸入用戶名！");
					return false;
				}
				var pass = $("#pass").val();
				var pass1 = $("#pass1").val();
				if(pass==""){
				    alert("請(qǐng)輸入密碼！");
					return false;
				}
				if(pass1 != pass){
				    alert("兩次密碼不一緻！");
					return false;
				}
			}
		}
    });
});

最後，要提交表單，獲取表單的值，你(nǐ)可(kě)以在最後一步“确定”按鈕上(shàng)綁定submit()方法，通(tōng)過action提交表單。本文為(wèi)了演示，采用以下方法獲取輸入的內(nèi)容：

$("#sub").click(function(){
	var data = $("form").serialize();
	alert(data);
});