Implémentation d'un assistant d'enregistrement étape par étape basé sur jquery - code source attachment_jquery

Je vais d'abord vous montrer les rendus. Les amis qui en ont besoin peuvent télécharger le code source~

Voir la démo Télécharger le code source

HTML

Chargez d'abord la bibliothèque jquery et le plug-in déroulant scrollable.js

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

Construisez ensuite la structure principale 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>

Ce qui précède est un formulaire d'inscription. Notez que vous pouvez remplir le contenu du formulaire HTML de votre choix dans les trois .pages. En raison du manque d'espace, cet article ne répertorie pas le contenu spécifique du formulaire.

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}

Vous pouvez modifier le CSS en fonction de l'environnement réel de l'application pour refléter différentes apparences.

jQuery

Inutile de préciser que tout comme les autres plug-ins, la méthode est appelée directement.

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

C'est aussi simple que cela. Vous pouvez désormais changer d'étape en cliquant sur Suivant. Cependant, le problème est que le style de l'onglet du titre de l'étape de navigation n'est pas modifié en même temps. Lorsque vous cliquez sur Suivant, la légalité de la saisie actuelle du formulaire doit être vérifiée. . Heureusement, deux méthodes simplifient grandement le problème.

onSeek: function(); Que se passe-t-il lorsque la page actuelle défile ? Dans ce cas, nous voulons changer le style d'onglet.
onBeforeSeek: function(); Que se passe-t-il avant le défilement, dans ce cas nous voulons valider le formulaire.

Veuillez consulter le 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; 
  } 
  } 
 } 
 }); 
}); 

Enfin, pour soumettre le formulaire et obtenir la valeur du formulaire, vous pouvez lier la méthode submit() au bouton "OK" dans la dernière étape et soumettre le formulaire par l'action. À des fins de démonstration, cet article utilise la méthode suivante pour obtenir le contenu d'entrée :

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