Implementation of a scrolling step-by-Step Registration wizard based on jquery-source code _jquery

First to show you the effect of the map, the need for friends can download the source Oh ~

View Demo Download source code

Html

First, you load the jquery library and the scrolling plugin scrollable.js

<script type= "Text/javascript" src= "Jquery.js" ></script> 

The HTML body structure is then constructed.

 <form action= "#" method= "POST" > <div id= "Wizard" > <ul id= "status" > <li class= "Active" >< Strong>1.</strong> Create account </li> <li><strong>2.</strong> fill in contact information </li> <li> <strong>3.</strong> completion </li> </ul> <div class= "items" > <div class= "page" >--- --Arbitrary HTML content-----<div class= "Btn_nav" > <input type= "button" class= "Next Right" value= "next»"/> </di v> </div> <div class= "page" >-----arbitrary HTML content-----<div class= "Btn_nav" > <input type= "bu 
  Tton "class=" prev "style=" Float:left "value=" «Previous step "/> <input type=" button "class=" Next Right "value=" next» "/> </div> </div> <div class= "page" >-----arbitrary HTML content-----<div class= "Btn_nav" > <inpu T type= "button" class= "prev" style= "Float:left" value= "«Previous steps"/> <input type= "button" class= "Next Right" id= "sub" Value= "OK"/> &LT;/DIV&GT </div> </div> </div> </form>

Above is a registration form, note that in three. Page you can fill in any HTML form you want. Limited to space 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;p adding-left:25px!important;} 
#status li{float:left;color: #fff;p adding: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}

You can modify the CSS to reflect the different appearance according to the actual application environment.

Jquery

No doubt, as with other plug-ins, call methods directly.

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

It's as simple as that, you can now click Next to switch steps, but the problem is that the navigation Step Header tab style does not switch at the same time, click Next should verify the current form input legality. Thankfully, two methods make the problem simple.

Onseek:function (); What happens when you scroll through the current page, in this case, we switch the tab style.
Onbeforeseek:function (); What happens before scrolling, in this case we're going to validate the form.

Please look at the code:

$ (function () { 
 $ ("#wizard"). Scrollable ({ 
 onseek:function (event,i) {//Toggle tab Style 
  $ ("#status Li"). Removeclass ("active"). EQ (i). addclass ("active"); 
 }, 
 onbeforeseek:function (event,i) {//Validate form 
  if (i==1) { 
  var user = $ ("#user"). Val (); 
  if (user== "") { 
   alert ("Enter user name!") "); 
   return false; 
  } 
  var pass = $ ("#pass"). Val (); 
  var Pass1 = $ ("#pass1"). Val (); 
  if (pass== "") { 
   alert ("Please enter a password!") "); 
   return false; 
  } 
  if (Pass1!= pass) { 
   alert ("two times password inconsistent!") "); 
   return false;}}} 
 ); 

Finally, to submit the form and get the value of the form, you can bind the submit () method to the last step "OK" button and submit the form by action. For demonstration purposes, this article takes the following methods to get what you enter:

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