快捷導(dǎo)航

基于jquery實(shí)現(xiàn)一個(gè)滾動(dòng)的分步注冊(cè)向?qū)?附源碼

更新時(shí)間：2015年08月26日 17:22:48 投稿：mrr

使用jQuery實(shí)現(xiàn)很多很有意思的應(yīng)用效果。我們?cè)诤芏嗑W(wǎng)站注冊(cè)會(huì)員時(shí)，需要填寫注冊(cè)表單，包括登錄信息、個(gè)人聯(lián)系信息等，本文將帶您一起體驗(yàn)jQuery實(shí)現(xiàn)的一個(gè)可以滾動(dòng)的十分友好的分步注冊(cè)向?qū)?，需要的朋友可以參考?/div>

先給大家展示效果圖，需要的朋友可以下載源碼哦～

查看演示下載源碼

HTML

首先要載入jquery庫和滾動(dòng)插件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>

以上是一個(gè)注冊(cè)表單，注意在三個(gè).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(); 
});

就是這么簡(jiǎn)單，現(xiàn)在可以通過單擊下一步切換步驟了，但有問題是導(dǎo)航的步驟標(biāo)題tab樣式?jīng)]有同時(shí)切換，點(diǎn)擊下一步時(shí)應(yīng)該驗(yàn)證當(dāng)前表單輸入的合法性。值得慶幸的是，兩個(gè)方法使得問題變得很簡(jiǎn)單了。

onSeek：function();當(dāng)滾動(dòng)當(dāng)前page后發(fā)生的事情，本例中我們要切換tab樣式。
onBeforeSeek：function();滾動(dòng)之前發(fā)生的事情，本例中我們要驗(yàn)證表單。

請(qǐng)看代碼：

$(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("請(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; 
  } 
  } 
 } 
 }); 
});

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

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

基于jquery實(shí)現(xiàn)一個(gè)滾動(dòng)的分步注冊(cè)向?qū)?附源碼

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具