jquery implements a scrolling step-by-Step Registration Wizard feature

Xhtml

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

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Jquery.js" ></script> <script type= "Text/javascript" src= "Scrollable.js" ></script>

The HTML body structure is then constructed.

The code is as follows

Copy Code

<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 the contact information </li> <li><strong>3.</strong> Completion </li> </ul> <div class= "Items" > <div class= "Page" > -----Any HTML content----- <div class= "Btn_nav" > <input type= "button" class= "Next Right" value= "next»"/> </div> </div> <div class= "Page" > -----Any HTML content----- <div class= "Btn_nav" > <input type= "button" class= "prev" style= "Float:left" value= "«Previous step"/> <input type= "button" class= "Next Right" value= "next»"/> </div> </div> <div class= "Page" > -----Any HTML content----- <div class= "Btn_nav" > <input type= "button" class= "prev" style= "Float:left" value= "«Previous step"/> <input type= "button" class= "Next Right" id= "sub" value= "OK"/> </div> </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 content of the form, the details can be viewed demo source.

Css

The code is as follows

Copy Code

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

The code is as follows	Copy Code
$ (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:

The code is as follows

Copy 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 ("Please enter a username!") "); 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:

The code is as follows	Copy Code
$ ("#sub"). Click (function () { var data = $ ("form"). Serialize (); alert (data); });

Full instance

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> &lt;title&gt;jquery Implement a scrolling step-by-Step Registration wizard &lt;/title&gt; &lt;link rel= "stylesheet" type= text/css "href=". /css/main.css "/&gt; &lt;style type= "Text/css" &gt; #wizard {border:5px solid #789; font-size:12px;height:400px;margin:20px auto;width:570px;overflow:hidden;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;} #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} &lt;/style&gt; &lt;script type= "Text/javascript" src= ". /js/jquery.js "&gt;&lt;/script&gt; &lt;script type= "Text/javascript" src= "Scrollable.js" &gt;&lt;/script&gt; &lt;/head&gt; <body> <div id= "Main" > <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 the contact information </li> <li><strong>3.</strong> Completion </li> </ul> &lt;div class= "Items" &gt; &lt;div class= "Page" &gt; &lt;h3&gt; Create an account &lt;br/&gt;&lt;em&gt; please fill in your registration account information for login. &lt;/em&gt;&lt;/h3&gt; &lt;p&gt;&lt;label&gt; User name: &lt;/label&gt;&lt;input type= "text" class= "input" id= "user" name= "username"/&gt;&lt;/p &gt; &lt;p&gt;&lt;label&gt; Password: &lt;/label&gt;&lt;input type= "password" class= "input" id= "pass" name= "password"/&gt;&lt;/ P&gt; &lt;p&gt;&lt;label&gt; Confirm Password: &lt;/label&gt;&lt;input type= "password" class= "input" id= "Pass1" name= "Password1"/&gt; &lt;/p&gt; &lt;div class= "Btn_nav" &gt; &lt;input type= "button" class= "Next Right" value= "next &amp;raquo;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "Page" &gt; &lt;h3&gt; fill in the contact information &lt;br/&gt;&lt;em&gt; please tell us your contact details. &lt;/em&gt;&lt;/h3&gt; &lt;p&gt;&lt;label&gt;e-mail:&lt;/label&gt;&lt;input type= "text" class= "input" name= "email"/&gt;&lt;/p&gt; &lt;p&gt;&lt;label&gt;qq:&lt;/label&gt;&lt;input type= "text" class= "input" name= "QQ"/&gt;&lt;/p&gt; &lt;p&gt;&lt;label&gt; Mobile phone Number: &lt;/label&gt;&lt;input type= "text" class= "input" name= "mobile"/&gt;&lt;/p&gt; &lt;div class= "Btn_nav" &gt; &lt;input type= "button" class= "prev" style= "Float:left" value= "&amp;laquo; previous step"/&gt; &lt;input type= "button" class= "Next Right" value= "next &amp;raquo;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "Page" &gt; &lt;h3&gt; Complete Registration &lt;br/&gt;&lt;em&gt; Click OK to complete registration. &lt;/em&gt;&lt;/h3&gt; &lt;h4&gt;helloweba welcome you! &lt;/h4&gt; &lt;p&gt; please click "OK" button to complete registration. &lt;/p&gt; &lt;br/&gt; &lt;br/&gt; &lt;br/&gt; &lt;div class= "Btn_nav" &gt; &lt;input type= "button" class= "prev" style= "Float:left" value= "&amp;laquo; previous step"/&gt; &lt;input type= "button" class= "Next Right" id= "sub" value= "OK"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </div> &lt;script type= "Text/javascript" &gt; $ (function () { $ ("#wizard"). Scrollable ({ Onseek:function (event,i) { $ ("#status li"). Removeclass ("active"). EQ (i) addclass ("active"); }, Onbeforeseek:function (event,i) { if (i==1) { var user = $ ("#user"). Val (); if (user== "") { Alert ("Please enter a username!") "); 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; } } } }); $ ("#sub"). Click (function () { var data = $ ("form"). Serialize (); alert (data); }); }); &lt;/script&gt; </body>

SOURCE Download Address: Http://file.111cn.net/download/2013/05/15/reg_wizard.rar