jQuery实现一个滚动的分步注册向导功能

XHTML

首先要载入jquery库和滚动插件scrollable.js

 代码如下 复制代码

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="scrollable.js"></script> 

接着构造html主体结构。

 代码如下 复制代码

<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"> 
           -----任意html内容----- 
           <div class="btn_nav"> 
              <input type="button" class="next right" value="下一步»" /> 
           </div> 
        </div> 
        <div class="page"> 
           -----任意html内容----- 
           <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"> 
           -----任意html内容----- 
           <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> 

 

以上是一个注册表单,注意在三个.page里可以填写任何你想要的html表单内容。限于篇幅本文没有列出表单具体内容,详情可以查看demo源码。

CSS

 代码如下 复制代码

#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;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} 

您可以根据实际应用环境修改css,来体现不同的外观。

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; 
                } 
            } 
        } 
    }); 
}); 

 

最后,要提交表单,获取表单的值,你可以在最后一步“确定”按钮上绑定submit()方法,通过action提交表单。本文为了演示,采用以下方法获取输入的内容:

 代码如下 复制代码

$("#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>
<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.js"></script>
<script type="text/javascript" src="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="下一步&raquo;" />
               </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="&laquo;上一步" />
                  <input type="button" class="next right" value="下一步&raquo;" />
               </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="&laquo;上一步" />
                  <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>

源码下载地址:http://file.111cn.net/download/2013/05/15/reg_wizard.rar

时间: 2024-10-02 17:42:18

jQuery实现一个滚动的分步注册向导功能的相关文章

基于jquery实现一个滚动的分步注册向导-附源码_jquery

先给大家展示效果图,需要的朋友可以下载源码哦- 查看演示        下载源码 HTML 首先要载入jquery库和滚动插件scrollable.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script&

jQuery的Ajax用户认证和注册技术实例教程(附demo源码)_jquery

前面介绍了<jquery+ajax注册实时验证>及<jQuery使用$.ajax进行即时验证的方法>.这里进一步总结了jQuery的Ajax用户认证和注册技术.分享给大家供大家参考,具体如下: Ajax 表单提交是一个功能强大的技术,提供一种发送 web 表单的方法,无需重载浏览器窗口.jQuery 库让您使用 Ajax 表单提交功能进一步提供一个方便快捷的方法,以少量代码生成可用 Ajax 的 Web 表单.在本文中,学习如何使用 jQuery 创建基础 Ajax 表单提交,以及

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhone 5C页面:http://www.dowebok.com/demo/2014/77/index8.html  网易邮箱6.0:http://www.dowebok.com/demo/2014/97/ 来往官网:http://www.laiwang.com 百度百科史记2013:http://www

jQuery向下滚动即时加载内容实现的瀑布流效果_php实例

下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器, 每个 li 表示一列 <ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件) <li><

jquery 多行滚动代码(附详细解释)_jquery

复制代码 代码如下: <!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=&qu

jquery跟随屏幕滚动效果的实现代码_jquery

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc

jQuery实现简单滚动动画效果_jquery

动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html> 先添加两个<a>元素作为按钮.然后对<a>元素进行补充: <html> <bo

基于编写jQuery的无缝滚动插件_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

同一页面可次调用的jquery文字无缝滚动插件代码

jquery文字无缝滚动插件,仅适合于文字,因为此效果是用不断的将第一行插入到最后来实现的,如果是比较大的内容块,会比较卡. 源代码如下:     代码如下 复制代码 (function($) {   $.fn.myScroll = function(options) {     //默认配置     var defaults = {       speed: 40,//滚动速度,值越大速度越慢       rowHeight: 24 //每行的高度     };     var opts =