以下是 jQuery滑动表单验证效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fancy Sliding Form with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Fancy Sliding Form with jQuery" />
<meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="sliding.form.js"></script>
</head>
<style>
span.reference{
position:fixed;
left:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;
}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<body>
<div>
<span class="reference">
<a href="#">back to Codrops</a>
</span>
</div>
<div id="content">
<h1>Fancy Sliding Form with jQuery</h1>
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="username">User name</label>
<input id="username" name="username" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" placeholder="info@tympanus.net" type="email" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label>
<input id="name" name="name" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="country">Country</label>
<input id="country" name="country" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="website">Website</label>
<input id="website" name="website" placeholder="#" type="tel" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset class="step">
<legend>Payment</legend>
<p>
<label for="cardtype">Card</label>
<select id="cardtype" name="cardtype">
<option>Visa</option>
<option>Mastercard</option>
<option>American Express</option>
</select>
</p>
<p>
<label for="cardnumber">Card number</label>
<input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="secure">Security code</label>
<input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="namecard">Name on Card</label>
<input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset class="step">
<legend>Settings</legend>
<p>
<label for="newsletter">Newsletter</label>
<select id="newsletter" name="newsletter">
<option value="Daily" selected>Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Never">Never</option>
</select>
</p>
<p>
<label for="updates">Updates</label>
<select id="updates" name="updates">
<option value="1" selected>Package 1</option>
<option value="2">Package 2</option>
<option value="0">Don't send updates</option>
</select>
</p>
<p>
<label for="tagname">Newsletter Tag</label>
<input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>
Everything in the form was correctly filled
if all the steps have a green checkmark icon.
A red checkmark icon indicates that some field
is missing or filled out with invalid data. In this
last step the user can confirm the submission of
the form.
</p>
<p class="submit">
<button id="registerButton" type="submit">Register</button>
</p>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">
<a href="#">Account</a>
</li>
<li>
<a href="#">Personal Details</a>
</li>
<li>
<a href="#">Payment</a>
</li>
<li>
<a href="#">Settings</a>
</li>
<li>
<a href="#">Confirm</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS代码(style.css):
*{margin:0px;padding:0px;}
body{color:#444444;font-size:13px;background:#f2f2f2;font-family:"Century Gothic",Helvetica,sans-serif;}
#content{margin:15px auto;text-align:center;width:600px;position:relative;height:100%;}
#wrapper{-moz-box-shadow:0px 0px 3px #aaa;-webkit-box-shadow:0px 0px 3px #aaa;box-shadow:0px 0px 3px #aaa;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:2px solid #fff;background-color:#f9f9f9;width:600px;overflow:hidden;}
#steps{width:600px;/*height:320px;*/
overflow:hidden;}
.step{float:left;width:600px;/*height:320px;*/
}
#navigation{height:45px;background-color:#e9e9e9;border-top:1px solid #fff;-moz-border-radius:0px 0px 10px 10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
#navigation ul{list-style:none;float:left;margin-left:22px;}
#navigation ul li{float:left;border-right:1px solid #ccc;border-left:1px solid #ccc;position:relative;margin:0px 2px;}
#navigation ul li a{display:block;height:45px;background-color:#444;color:#777;outline:none;font-weight:bold;text-decoration:none;line-height:45px;padding:0px 20px;border-right:1px solid #fff;border-left:1px solid #fff;background:#f0f0f0;background:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(240,240,240)),color-stop(0.55,rgb(227,227,227)),color-stop(0.78,rgb(240,240,240)) );background:-moz-linear-gradient( center bottom,rgb(240,240,240) 9%,rgb(227,227,227) 55%,rgb(240,240,240) 78% )}
#navigation ul li a:hover,#navigation ul li.selected a{background:#d8d8d8;color:#666;text-shadow:1px 1px 1px #fff;}
span.checked{background:transparent url(../images/checked.png) no-repeat top left;position:absolute;top:0px;left:1px;width:20px;height:20px;}
span.error{background:transparent url(../images/error.png) no-repeat top left;position:absolute;top:0px;left:1px;width:20px;height:20px;}
#steps form fieldset{border:none;padding-bottom:20px;}
#steps form legend{text-align:left;background-color:#f0f0f0;color:#666;font-size:24px;text-shadow:1px 1px 1px #fff;font-weight:bold;float:left;width:590px;padding:5px 0px 5px 10px;margin:10px 0px;border-bottom:1px solid #fff;border-top:1px solid #d9d9d9;}
#steps form p{float:left;clear:both;margin:5px 0px;background-color:#f4f4f4;border:1px solid #fff;width:400px;padding:10px;margin-left:100px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0px 0px 3px #aaa;-webkit-box-shadow:0px 0px 3px #aaa;box-shadow:0px 0px 3px #aaa;}
#steps form p label{width:160px;float:left;text-align:right;margin-right:15px;line-height:26px;color:#666;text-shadow:1px 1px 1px #fff;font-weight:bold;}
#steps form input:not([type=radio]),#steps form textarea,#steps form select{background:#ffffff;border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;outline:none;padding:5px;width:200px;float:left;}
#steps form input:focus{-moz-box-shadow:0px 0px 3px #aaa;-webkit-box-shadow:0px 0px 3px #aaa;box-shadow:0px 0px 3px #aaa;background-color:#FFFEEF;}
#steps form p.submit{background:none;border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
#steps form button{border:none;outline:none;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;color:#ffffff;display:block;cursor:pointer;margin:0px auto;clear:both;padding:7px 25px;text-shadow:0 1px 1px #777;font-weight:bold;font-family:"Century Gothic",Helvetica,sans-serif;font-size:22px;-moz-box-shadow:0px 0px 3px #aaa;-webkit-box-shadow:0px 0px 3px #aaa;box-shadow:0px 0px 3px #aaa;background:#4797ED;}
#steps form button:hover{background:#d8d8d8;color:#666;text-shadow:1px 1px 1px #fff;}
分享到QQ
分享到微博
微信扫一扫
