先給大家展示效果圖，需要的朋友可以下載源碼哦～
HTML
首先要載入jquery庫和滾動插件scrollable.js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script>
接著構造html主體結構。
<form action="#" method="post"> <div id="wizard"> <ul id="status"> <li class="active"><strong>1.</strong>創建賬戶</li> <li><strong>2.</strong>填寫聯系信息</li> <li><strong>3.</strong>完成</li> </ul> <div class="items"> <div class="page"> -----任意html內容----- <div class="btn_nav"> <input type="button" class="next right" value="下一步»" /> </div> </div> <div class="page"> -----任意html內容----- <div class="btn_nav"> <input type="button" class="prev" style="float:left" value="«上一步" /> <input type="button" class="next right" value="下一步»" /> </div> </div> <div class="page"> -----任意html內容----- <div class="btn_nav"> <input type="button" class="prev" style="float:left" value="«上一步" /> <input type="button" class="next right" id="sub" value="確定" /> </div> </div> </div> </div> </form>
以上是一個注冊表單，注意在三個.page里可以填寫任何你想要的html表單內容。限于篇幅本文沒有列出表單具體內容。
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}您可以根據實際應用環境修改css，來體現不同的外觀。
jQuery
毋庸置疑，和其他插件一樣，直接調用方法。
$(function(){ $("#wizard").scrollable(); }); 就是這么簡單，現在可以通過單擊下一步切換步驟了，但有問題是導航的步驟標題tab樣式沒有同時切換，點擊下一步時應該驗證當前表單輸入的合法性。值得慶幸的是，兩個方法使得問題變得很簡單了。
onSeek：function();當滾動當前page后發生的事情，本例中我們要切換tab樣式。
onBeforeSeek：function();滾動之前發生的事情，本例中我們要驗證表單。
請看代碼：
$(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("請輸入用戶名！"); return false; } var pass = $("#pass").val(); var pass1 = $("#pass1").val(); if(pass==""){ alert("請輸入密碼！"); return false; } if(pass1 != pass){ alert("兩次密碼不一致！"); return false; } } } }); }); 最后，要提交表單，獲取表單的值，你可以在最后一步“確定”按鈕上綁定submit()方法，通過action提交表單。本文為了演示，采用以下方法獲取輸入的內容：
$("#sub").click(function(){ var data = $("form").serialize(); alert(data); });新聞熱點
疑難解答
