以下是 jQuery实现分步注册向导js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现分步注册向导</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
#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;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}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scrollable.js"></script>
</head>
<body>
<div id="main">
<h2 class="top_title">jQuery实现一个滚动的分步注册向导</h2>
<p style="height:24px; line-height:24px; margin:16px">注：这只是一个演示demo，程序员设计师联盟淘宝店不会记录用户输入的信息，请放心使用。</p>
<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">
<h3>创建一个账户<br/><em>请填写您的注册账户信息，用于登录。</em></h3>
<p><label>用户名：</label><input type="text" class="input" id="user" name="username" /></p>
<p><label>密码：</label><input type="password" class="input" id="pass" name="password" /></p>
<p><label>确认密码：</label><input type="password" class="input" id="pass1" name="password1" /></p>
<div class="btn_nav">
<input type="button" class="next right" value="下一步»" />
</div>
</div>
<div class="page">
<h3>填写联系信息<br/><em>请告诉我们您的联系方式。</em></h3>
<p><label>E-mail：</label><input type="text" class="input" name="email" /></p>
<p><label>QQ：</label><input type="text" class="input" name="qq" /></p>
<p><label>手机号码：</label><input type="text" class="input" name="mobile" /></p>
<div class="btn_nav">
<input type="button" class="prev" style="float:left" value="«上一步" />
<input type="button" class="next right" value="下一步»" />
</div>
</div>
<div class="page">
<h3>完成注册<br/><em>点击确定完成注册。</em></h3>
<h4>Txcomcom欢迎您！</h4>
<p>请点击“确定”按钮完成注册。</p>
<br/>
<br/>
<br/>
<div class="btn_nav">
<input type="button" class="prev" style="float:left" value="«上一步" />
<input type="button" class="next right" id="sub" value="确定" />
</div>
</div>
</div>
</div>
</form><br />
</div>
<script type="text/javascript">
$(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("请输入用户名！");
return false;
}
var pass = $("#pass").val();
var pass1 = $("#pass1").val();
if(pass==""){
alert("请输入密码！");
return false;
}
if(pass1 != pass){
alert("两次密码不一致！");
return false;
}
}
}
});
$("#sub").click(function(){
var data = $("form").serialize();
alert(data);
});
});
</script>
</body>
</html>
JS代码(scrollable.js):
/*! * jQuery Tools v1.2.5 - The missing UI library for the Web * * scrollable/scrollable.js * * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. * * http://flowplayer.org/tools/ * */
(function(a){
a.tools=a.tools||{
version:"v1.2.5"}
,a.tools.scrollable={
conf:{
activeClass:"active",circular:!1,clonedClass:"cloned",disabledClass:"disabled",easing:"swing",initialIndex:0,item:null,items:".items",keyboard:!0,mousewheel:!1,next:".next",prev:".prev",speed:400,vertical:!1,touch:!0,wheelSpeed:0}
}
;
function b(a,b){
var c=parseInt(a.css(b),10);
if(c)return c;
var d=a[0].currentStyle;
return d&&d.width&&parseInt(d.width,10)}
function c(b,c){
var d=a(c);
return d.length<2?d:b.parent().find(c)}
var d;
function e(b,e){
var f=this,g=b.add(f),h=b.children(),i=0,j=e.vertical;
d||(d=f),h.length>1&&(h=a(e.items,b)),a.extend(f,{
getConf:function(){
return e}
,getIndex:function(){
return i}
,getSize:function(){
return f.getItems().size()}
,getNaviButtons:function(){
return m.add(n)}
,getRoot:function(){
return b}
,getItemWrap:function(){
return h}
,getItems:function(){
return h.children(e.item).not("."+e.clonedClass)}
,move:function(a,b){
return f.seekTo(i+a,b)}
,next:function(a){
return f.move(1,a)}
,prev:function(a){
return f.move(-1,a)}
,begin:function(a){
return f.seekTo(0,a)}
,end:function(a){
return f.seekTo(f.getSize()-1,a)}
,focus:function(){
d=f;
return f}
,addItem:function(b){
b=a(b),e.circular?(h.children("."+e.clonedClass+":last").before(b),h.children("."+e.clonedClass+":first").replaceWith(b.clone().addClass(e.clonedClass))):h.append(b),g.trigger("onAddItem",[b]);
return f}
,seekTo:function(b,c,k){
b.jquery||(b*=1);
if(e.circular&&b===0&&i==-1&&c!==0)return f;
if(!e.circular&&b<0||b>f.getSize()||b<-1)return f;
var l=b;
b.jquery?b=f.getItems().index(b):l=f.getItems().eq(b);
var m=a.Event("onBeforeSeek");
if(!k){
g.trigger(m,[b,c]);
if(m.isDefaultPrevented()||!l.length)return f}
var n=j?{
top:-l.position().top}
:{
left:-l.position().left}
;
i=b,d=f,c===undefined&&(c=e.speed),h.animate(n,c,e.easing,k||function(){
g.trigger("onSeek",[b])}
);
return f}
}
),a.each(["onBeforeSeek","onSeek","onAddItem"],function(b,c){
a.isFunction(e[c])&&a(f).bind(c,e[c]),f[c]=function(b){
b&&a(f).bind(c,b);
return f}
}
);
if(e.circular){
var k=f.getItems().slice(-1).clone().prependTo(h),l=f.getItems().eq(1).clone().appendTo(h);
k.add(l).addClass(e.clonedClass),f.onBeforeSeek(function(a,b,c){
if(!a.isDefaultPrevented()){
if(b==-1){
f.seekTo(k,c,function(){
f.end(0)}
);
return a.preventDefault()}
b==f.getSize()&&f.seekTo(l,c,function(){
f.begin(0)}
)}
}
),f.seekTo(0,0,function(){
}
)}
var m=c(b,e.prev).click(function(){
f.prev()}
),n=c(b,e.next).click(function(){
f.next()}
);
!e.circular&&f.getSize()>1&&(f.onBeforeSeek(function(a,b){
setTimeout(function(){
a.isDefaultPrevented()||(m.toggleClass(e.disabledClass,b<=0),n.toggleClass(e.disabledClass,b>=f.getSize()-1))}
,1)}
),e.initialIndex||m.addClass(e.disabledClass)),e.mousewheel&&a.fn.mousewheel&&b.mousewheel(function(a,b){
if(e.mousewheel){
f.move(b<0?1:-1,e.wheelSpeed||50);
return!1}
}
);
if(e.touch){
var o={
}
;
h[0].ontouchstart=function(a){
var b=a.touches[0];
o.x=b.clientX,o.y=b.clientY}
,h[0].ontouchmove=function(a){
if(a.touches.length==1&&!h.is(":animated")){
var b=a.touches[0],c=o.x-b.clientX,d=o.y-b.clientY;
f[j&&d>0||!j&&c>0?"next":"prev"](),a.preventDefault()}
}
}
e.keyboard&&a(document).bind("keydown.scrollable",function(b){
if(e.keyboard&&!b.altKey&&!b.ctrlKey&&!a(b.target).is(":input")){
if(e.keyboard!="static"&&d!=f)return;
var c=b.keyCode;
if(j&&(c==38||c==40)){
f.move(c==38?-1:1);
return b.preventDefault()}
if(!j&&(c==37||c==39)){
f.move(c==37?-1:1);
return b.preventDefault()}
}
}
),e.initialIndex&&f.seekTo(e.initialIndex,0,function(){
}
)}
a.fn.scrollable=function(b){
var c=this.data("scrollable");
if(c)return c;
b=a.extend({
}
,a.tools.scrollable.conf,b),this.each(function(){
c=new e(a(this),b),a(this).data("scrollable",c)}
);
return b.api?c:this}
}
)(jQuery);
CSS代码(main.css):
@charset "utf-8";/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/
;text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
body{height:100%;font:12px/18px Tahoma,Helvetica,Arial,Verdana,"\5b8b\4f53",sans-serif;color:#51555C;background:#162934}
img{border:none}
#header{width:910px;height:92px;margin:0 auto;}
#logo{width:240px;height:90px;background:url(../images/logo_demo.gif) no-repeat}
#logo h1{text-indent:-999em}
#logo h1 a{display:block;width:240px;height:90px}
#main{width:910px;min-height:600px;margin:30px auto 0 auto;background:#fff;-moz-border-radius:12px;-khtml-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
h2.top_title{margin:4px 20px;padding-top:15px;padding-left:20px;padding-bottom:10px;border-bottom:1px solid #d3d3d3;font-size:18px;color:#a84c10;background:url(../images/arrL.gif) no-repeat 2px 14px}
#footer{height:60px;}
#footer p{padding:10px 2px;line-height:24px;text-align:center}
#footer p a:hover{color:#51555C}
.google_ad{width:728px;height:90px;margin:50px auto}
.ad_76090,.ad_demo{width:760px;height:90px;margin:40px auto}
分享到QQ
分享到微博
微信扫一扫
