基于jquery實(shí)現(xiàn)一個滾動的分步注冊向?qū)?附源碼
更新時間：2015年08月26日 17:22:48 投稿：mrr
使用jQuery實(shí)現(xiàn)很多很有意思的應(yīng)用效果。我們在很多網(wǎng)站注冊會員時，需要填寫注冊表單，包括登錄信息、個人聯(lián)系信息等，本文將帶您一起體驗(yàn)jQuery實(shí)現(xiàn)的一個可以滾動的十分友好的分步注冊向?qū)?，需要的朋友可以參考?/div>
先給大家展示效果圖，需要的朋友可以下載源碼哦～
HTML
首先要載入jquery庫和滾動插件scrollable.js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script>
接著構(gòu)造html主體結(jié)構(gòu)。
<form action="#" method="post"> <div id="wizard"> <ul id="status"> <li class="active"><strong>1.</strong>創(chuàng)建賬戶</li> <li><strong>2.</strong>填寫聯(lián)系信息</li> <li><strong>3.</strong>完成</li> </ul> <div class="items"> <div class="page"> -----任意html內(nèi)容----- <div class="btn_nav"> <input type="button" class="next right" value="下一步»" /> </div> </div> <div class="page"> -----任意html內(nèi)容----- <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內(nèi)容----- <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表單內(nèi)容。限于篇幅本文沒有列出表單具體內(nèi)容。
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}
您可以根據(jù)實(shí)際應(yīng)用環(huán)境修改css，來體現(xiàn)不同的外觀。
jQuery
毋庸置疑，和其他插件一樣，直接調(diào)用方法。
$(function(){
$("#wizard").scrollable();
});
就是這么簡單，現(xiàn)在可以通過單擊下一步切換步驟了，但有問題是導(dǎo)航的步驟標(biāo)題tab樣式?jīng)]有同時切換，點(diǎn)擊下一步時應(yīng)該驗(yàn)證當(dāng)前表單輸入的合法性。值得慶幸的是，兩個方法使得問題變得很簡單了。
onSeek：function();當(dāng)滾動當(dāng)前page后發(fā)生的事情，本例中我們要切換tab樣式。
onBeforeSeek：function();滾動之前發(fā)生的事情，本例中我們要驗(yàn)證表單。
請看代碼：
$(function(){
$("#wizard").scrollable({
onSeek: function(event,i){ //切換tab樣式
$("#status li").removeClass("active").eq(i).addClass("active");
},
onBeforeSeek:function(event,i){ //驗(yàn)證表單
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提交表單。本文為了演示，采用以下方法獲取輸入的內(nèi)容：
$("#sub").click(function(){
var data = $("form").serialize();
alert(data);
});
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)平滑滾動的標(biāo)簽分欄切換效果
- jQuery實(shí)現(xiàn)滾動切換的tab選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)圖片水平滾動效果代碼分享
- jquery實(shí)現(xiàn)動畫菜單的左右滾動、漸變及圖形背景滾動等效果
- jQuery實(shí)現(xiàn)圖片左右滾動特效
- jquery實(shí)現(xiàn)Li滾動時滾動條自動添加樣式的方法
- Jquery數(shù)字上下滾動動態(tài)切換插件
- jquery左右滾動焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過顯示上下頁按鈕
- jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動效果
- 基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動
- jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡單多行滾屏效果代碼
相關(guān)文章
當(dāng)頁面打開時我們需要執(zhí)行一些操作，下面為大家介紹三種不錯的方法，大家可以參考下2014-06-06
jQuery實(shí)現(xiàn)定時隱藏對話框的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時隱藏對話框的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery定時隱藏對話框的相關(guān)函數(shù)、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2018-02-02
jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法,實(shí)例分析了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
jQuery實(shí)現(xiàn)的向下圖文信息滾動效果
jquery實(shí)現(xiàn)的圖文滾動效果,圖文內(nèi)容經(jīng)過指定的間隔時間自動向下滾動顯示,效果非?？?。有需要的小伙伴可以參考下。2015-05-05
實(shí)例講解jQuery EasyUI tree中state屬性慎用
本文通過實(shí)例代碼給大家介紹jQuery EasyUI tree中state屬性慎用，切忌把state設(shè)置為closed，否則該節(jié)點(diǎn)會加載整個tree，形成死循環(huán)2016-04-04
一直以來，都對JS獲取元素的位置感到非常的困惑：一會client、一會offset、一會scroll。再加上各大瀏覽器之間的不兼容，唉，搞得哥暈暈乎乎的。2011-04-04
基于jQuery實(shí)現(xiàn)Tabs選項(xiàng)卡自定義插件
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Tabs選項(xiàng)卡自定義插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
起初以為this和$(this)就是一模子刻出來。但是我在閱讀時，和coding時發(fā)現(xiàn),總不是一回事。2009-08-08
輕量級網(wǎng)頁遮罩層jQuery插件用法實(shí)例
這篇文章主要介紹了輕量級網(wǎng)頁遮罩層jQuery插件用法,實(shí)例分析了jquery遮罩層插件的定義、功能及使用方法,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jquery可定制的在線UEditor編輯器，UEditor的功能非常強(qiáng)大，ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項(xiàng)目的不同需求，需要的朋友可以參考下2015-11-11