Melaksanakan wizard pendaftaran langkah demi langkah berdasarkan jquery - kod sumber attached_jquery

Saya akan tunjukkan renderingnya dahulu Kawan-kawan yang memerlukannya boleh memuat turun kod sumber~

Lihat demo Muat turun kod sumber

HTML

Mula-mula muatkan perpustakaan jquery dan pemalam boleh tatal boleh tatal.js

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="scrollable.js"></script> 

Kemudian bina struktur utama 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="下一步&raquo;" /> 
  </div> 
 </div> 
 <div class="page"> 
  -----任意html内容----- 
  <div class="btn_nav"> 
  <input type="button" class="prev" style="float:left" value="&laquo;上一步" /> 
  <input type="button" class="next right" value="下一步&raquo;" /> 
  </div> 
 </div> 
 <div class="page"> 
  -----任意html内容----- 
  <div class="btn_nav"> 
  <input type="button" class="prev" style="float:left" value="&laquo;上一步" /> 
  <input type="button" class="next right" id="sub" value="确定" /> 
  </div> 
 </div> 
 </div> 
 </div> 
</form>

Di atas ialah borang pendaftaran. Harap maklum bahawa anda boleh mengisi mana-mana kandungan borang html yang anda inginkan dalam tiga .pages. Disebabkan had ruang, artikel ini tidak menyenaraikan kandungan khusus borang tersebut.

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}

Anda boleh mengubah suai css mengikut persekitaran aplikasi sebenar untuk mencerminkan penampilan yang berbeza.

jQuery

Tidak perlu dikatakan, sama seperti pemalam lain, kaedah ini dipanggil terus.

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

Semudah itu anda boleh menukar langkah dengan mengklik Seterusnya Namun, masalahnya ialah gaya tab tajuk langkah navigasi tidak ditukar pada masa yang sama Apabila mengklik Seterusnya, kesahihan input borang semasa harus disahkan . Nasib baik, dua kaedah menjadikan masalahnya sangat mudah.

onSeek: function(); Apa yang berlaku apabila halaman semasa ditatal Dalam kes ini, kami ingin menukar gaya tab.
onBeforeSeek: function(); Apa yang berlaku sebelum menatal, dalam kes ini kami ingin mengesahkan borang.

Sila lihat kod:

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

Akhir sekali, untuk menyerahkan borang dan mendapatkan nilai borang, anda boleh mengikat kaedah submit() pada butang "OK" pada langkah terakhir dan menyerahkan borang melalui tindakan. Untuk tujuan tunjuk cara, artikel ini menggunakan kaedah berikut untuk mendapatkan kandungan input:

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