以下是 jQuery+CSS3实现多步注册表单进度条js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>
</head>
<body>
<div id="container">
<form action="#" method="post">
<!-- #first_step -->
<div id="first_step">
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>
<div class="form">
<input type="text" name="username" id="username" value="username" />
<label for="username">At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>
<input type="password" name="password" id="password" value="password" />
<label for="password">At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>
<input type="password" name="cpassword" id="cpassword" value="password" />
<label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #second_step -->
<div id="second_step">
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>
<div class="form">
<input type="text" name="firstname" id="firstname" value="first name" />
<label for="firstname">Your First Name. </label>
<input type="text" name="lastname" id="lastname" value="last name" />
<label for="lastname">Your Last Name. </label>
<input type="text" name="email" id="email" value="email address" />
<label for="email">Your email address. We send important administration notices to this address. </label>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #third_step -->
<div id="third_step">
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>
<div class="form">
<select id="age" name="age">
<option> 0 - 17</option>
<option>18 - 25</option>
<option>26 - 40</option>
<option>40+</option>
</select>
<label for="age">Your age range. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<select id="gender" name="gender">
<option>Male</option>
<option>Female</option>
</select>
<label for="gender">Your Gender. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<select id="country" name="country">
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Serbia</option>
<option>Italy</option>
</select>
<label for="country">Your country. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_third" id="submit_third" value="" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #fourth_step -->
<div id="fourth_step">
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>
<div class="form">
<h2>Summary</h2>
<table>
<tr><td>Username</td><td></td></tr>
<tr><td>Password</td><td></td></tr>
<tr><td>Email</td><td></td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Age</td><td></td></tr>
<tr><td>Gender</td><td></td></tr>
<tr><td>Country</td><td></td></tr>
</table>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value="" />
</div>
</form>
</div>
<div id="progress_bar">
<div id="progress"></div>
<div id="progress_text">0% Complete</div>
</div>
</body>
</html>
JS代码(jquery.inputfocus-0.9.min.js):
/*InputFocus for jQuery (version 0.9)Copyright (c) 2009 Simone D'Amicohttp://www.simonedamico.it/2009/08/jquery-inputfocus-evidenziare-i-campi-input-e-textarea-di-una-form/Licensed under the MIT license:http://www.opensource.org/licenses/mit-license.phpAny and all use of this script must be accompanied by this copyright/license notice in its present form.*/
$.fn.inputfocus=function(params){
params=$.extend({
focus_class:"focus",value:""}
,params);
this.each(function(){
$(this).focus(function(){
$(this).addClass(params.focus_class);
this.value=(this.value==params.value)?'':this.value;
}
);
$(this).blur(function(){
$(this).removeClass(params.focus_class);
this.value=(this.value=='')?params.value:this.value;
}
);
}
);
return this;
}
;
JS代码(jquery.main.js):
$(function(){
//original field values var field_values ={
//id:value 'username':'username','password':'password','cpassword':'password','firstname':'first name','lastname':'last name','email':'email address'}
;
//inputfocus $('input#username').inputfocus({
value:field_values['username']}
);
$('input#password').inputfocus({
value:field_values['password']}
);
$('input#cpassword').inputfocus({
value:field_values['cpassword']}
);
$('input#lastname').inputfocus({
value:field_values['lastname']}
);
$('input#firstname').inputfocus({
value:field_values['firstname']}
);
$('input#email').inputfocus({
value:field_values['email']}
);
//reset progress bar $('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step $('form').submit(function(){
return false;
}
);
$('#submit_first').click(function(){
//remove classes $('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty var fields = $('#first_step input[type=text],#first_step input[type=password]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<4 || value==field_values[$(this).attr('id')] ){
$(this).addClass('error');
$(this).effect("shake",{
times:3}
,50);
error++;
}
else{
$(this).addClass('valid');
}
}
);
if(!error){
if( $('#password').val() != $('#cpassword').val() ){
$('#first_step input[type=password]').each(function(){
$(this).removeClass('valid').addClass('error');
$(this).effect("shake",{
times:3}
,50);
}
);
return false;
}
else{
//update progress bar $('#progress_text').html('33% Complete');
$('#progress').css('width','113px');
//slide steps $('#first_step').slideUp();
$('#second_step').slideDown();
}
}
else return false;
}
);
$('#submit_second').click(function(){
//remove classes $('#second_step input').removeClass('error').removeClass('valid');
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{
2,4}
$/;
var fields = $('#second_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ){
$(this).addClass('error');
$(this).effect("shake",{
times:3}
,50);
error++;
}
else{
$(this).addClass('valid');
}
}
);
if(!error){
//update progress bar $('#progress_text').html('66% Complete');
$('#progress').css('width','226px');
//slide steps $('#second_step').slideUp();
$('#third_step').slideDown();
}
else return false;
}
);
$('#submit_third').click(function(){
//update progress bar $('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//prepare the fourth step var fields = new Array( $('#username').val(),$('#password').val(),$('#email').val(),$('#firstname').val() + ' ' + $('#lastname').val(),$('#age').val(),$('#gender').val(),$('#country').val() );
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] ) $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
}
);
//slide steps $('#third_step').slideUp();
$('#fourth_step').slideDown();
}
);
$('#submit_fourth').click(function(){
//send information to server alert('Data sent');
}
);
}
);
CSS代码(style.css):
/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
@font-face{font-family:'Cantarell';src:url(../fonts/Cantarell-Regular.eot);src:local('Cantarell'),url('../fonts/Cantarell-Regular.ttf') format('truetype');}
body{background-color:#f9f9f9;color:#222;font-family:Cantarell,Verdana,sans-serif;font-size:12px;}
input[type="submit"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner{border:none;}
input[type="submit"]:focus,input[type="button"]:focus{outline:none;}
.clear{clear:both;}
#container{background:url('../images/container.png') no-repeat;width:754px;height:370px;margin:20px auto;padding:50px 0;overflow:hidden;position:relative;}
#container #first_step,#second_step,#third_step,#fourth_step{display:none;}
#container #first_step{display:block;}
#container .form{margin:66px 72px 0 72px;}
#container h1,#container h2{font-size:Cantarell,Verdana,sans-serif;text-align:center;font-size:24px;text-shadow:1px 1px 2px #222;}
#container h1 span{color:#a90329;}
#container h2{color:#888;font-size:20px;text-align:left;text-shadow:none;}
#container table{margin:20px 40px;font-size:14px;font-weight:bold;}
#container table td{padding:5px 10px;}
#container table td:nth-child(2){color:#a90329;}
#container input,#container select{background:url('../images/input.png') no-repeat;color:#888;border:1px solid #ccc;font-family:Cantarell,Verdana,sans-serif;font-weight:bold;font-size:15px;width:300px;height:35px;padding:0 25px;margin:20px 0;float:left;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
#container input.submit{background:url('../images/button.png') no-repeat;border:none;cursor:pointer;width:85px;height:38px;position:relative;bottom:2px;left:655px;}
#container input.submit:focus{border:none;}
#container input.send{background:url('../images/send.png') no-repeat;}
#container input.error{border:1px solid red;}
#container input.valid{border:1px solid #1FFF00;}
#container input:focus,#container select:focus{border:1px solid #a90329;color:#a90329;}
#container select{padding:5px 0 5px 25px;}
#container option{padding:0 15px;}
#container label{color:#666;font-size:12px;font-weight:bold;line-height:14px;float:right;margin:23px -25px;width:270px;}
#progress_bar{background:url('../images/progress_bar.png') no-repeat;width:339px;height:24px;margin:0 auto;position:relative;}
#progress{background:url('../images/progress.png') repeat-x;width:0px;height:23px;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;}
#progress_text{position:relative;line-height:21px;text-align:center;font-weight:bold;color:white;text-shadow:1px 1px 2px #222;width:339px;height:24px;top:-23px;left:0;}