下载插件地址:http://www.helloweba.com/down-134.html
查看演示地址 http://www.helloweba.com/demo/reg_wizard/
参考:http://www.helloweba.com/view-blog-134.html
1.。。引入文件
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scrollable.js"></script>
2.。。html
<div id="main"><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>Helloweba欢迎您!</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>
</div>
3.。。css
#wizard {border:5px solid #789;font-size:12px;height:450px;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}
4.。jquery
$(function(){
$("#wizard").scrollable();
});
这样以后就差不多完成了。但是在点击下一步时表单没有验证,而且最顶部的tab没有随页面的跳转样式改变切换后的效果。哈哈不用怕,这个插件的两个方法可以帮我们解决:
onSeek:function();当滚动当前page后发生的事情,本例中我们要切换tab样式。
onBeforeSeek:function();滚动之前发生的事情,本例中我们要验证表单。
$(function(){
$("#wizard").scrollable({
onSeek: function(event,i){ //切换tab样式
$("#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;
}
}
}
});
});
最后想要获取表单的值只有给最后一个确定按钮加一个js事件就ok啦
$("#sub").click(function(){
var data = $("form").serialize();
alert(data);
});
完整版的在这里。。
<!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>
<style type="text/css">
#wizard {border:5px solid #789;font-size:12px;height:450px;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">
<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>Helloweba欢迎您!</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>
</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>