Implementierung eines rollierenden Schritt-für-Schritt-Registrierungsassistenten basierend auf jquery – Quellcode attachment_jquery

Ich zeige Ihnen zuerst die Renderings. Freunde, die es benötigen, können den Quellcode herunterladen~

Demo ansehen Quellcode herunterladen

HTML

Laden Sie zuerst die JQuery-Bibliothek und das scrollbare Plug-in scrollable.js

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

Dann erstellen Sie die HTML-Hauptstruktur.

 <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>

Das Obige ist ein Registrierungsformular. Beachten Sie, dass Sie auf den drei Seiten jeden gewünschten HTML-Formularinhalt ausfüllen können. Aus Platzgründen werden in diesem Artikel die spezifischen Inhalte des Formulars nicht aufgeführt.

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}

Sie können das CSS entsprechend der tatsächlichen Anwendungsumgebung ändern, um unterschiedliche Erscheinungsbilder widerzuspiegeln.

jQuery

Es versteht sich von selbst, dass die Methode wie bei anderen Plug-Ins direkt aufgerufen wird.

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

So einfach ist das. Jetzt können Sie die Schritte wechseln, indem Sie auf „Weiter“ klicken. Das Problem besteht jedoch darin, dass beim Klicken auf „Weiter“ nicht gleichzeitig die Rechtmäßigkeit der aktuellen Formulareingabe geändert wird . Glücklicherweise gibt es zwei Methoden, die das Problem sehr einfach machen.

onSeek: function(); Was passiert, wenn die aktuelle Seite gescrollt wird? In diesem Fall möchten wir den Tab-Stil ändern.
onBeforeSeek: function(); Was passiert vor dem Scrollen, in diesem Fall wollen wir das Formular validieren.

Bitte beachten Sie den Code:

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

Um das Formular abzuschicken und den Formularwert zu erhalten, können Sie im letzten Schritt die Methode „submit()“ an die Schaltfläche „OK“ binden und das Formular per Aktion absenden. Zu Demonstrationszwecken verwendet dieser Artikel die folgende Methode, um den Eingabeinhalt abzurufen:

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