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

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

WBOY

Lepaskan： 2016-05-16 15:42:20

asal

1514 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk