基于jquery實現一個滾動的分步注冊向導-附源碼_jquery

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
毋庸置疑，和其他插件一樣，直接調用方法。





就是這么簡單，現在可以通過單擊下一步切換步驟了，但有問題是導航的步驟標題tab樣式沒有同時切換，點擊下一步時應該驗證當前表單輸入的合法性。值得慶幸的是，兩個方法使得問題變得很簡單了。
onSeek：function();當滾動當前page后發生的事情，本例中我們要切換tab樣式。

onBeforeSeek：function();滾動之前發生的事情，本例中我們要驗證表單。
請看代碼：





最后，要提交表單，獲取表單的值，你可以在最后一步“確定”按鈕上綁定submit()方法，通過action提交表單。本文為了演示，采用以下方法獲取輸入的內容：




 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com