Implementing a rolling step-by-step registration wizard based on jquery - source code attached

Implementing a rolling step-by-step registration wizard based on jquery - source code attached_jquery

WBOY

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

Original

1514 people have browsed it

I will show you the renderings first. Friends who need it can download the source code~

View the demo Download the source code

HTML

First load the jquery library and scrollable plug-in scrollable.js

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

Copy after login

Then construct the html main structure.

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

Copy after login

The above is a registration form. Note that you can fill in any html form content you want in the three .pages. Due to space limitations, this article does not list the specific contents of the form.

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}

Copy after login

You can modify the css according to the actual application environment to reflect different appearances.

jQuery

Needless to say, just like other plug-ins, the method is called directly.

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

Copy after login

It’s that simple. Now you can switch steps by clicking Next. However, the problem is that the navigation step title tab style is not switched at the same time. When clicking Next, the legality of the current form input should be verified. Fortunately, two methods make the problem very simple.

onSeek: function(); What happens when the current page is scrolled. In this case, we want to switch the tab style.
onBeforeSeek: function(); What happens before scrolling, in this case we want to validate the form.

Please see the 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; 
  } 
  } 
 } 
 }); 
});

Copy after login

Finally, to submit the form and get the form value, you can bind the submit() method to the "OK" button in the last step and submit the form through action. For demonstration purposes, this article uses the following method to obtain the input content:

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

Copy after login