jquery的一个插件scrollable.js做的注册三步骤，只有完成第一个才能进入下一步

最新推荐文章于 2019-09-03 14:08:37 发布
最新推荐文章于 2019-09-03 14:08:37 发布
阅读量6.9k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/51507039
版权

下载插件地址：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="下一步&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>


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="下一步&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>


肖肖肖丽珠
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery实现步骤条效果(上一步,下一步)
chuangdiuzhuang6335的博客
08-02 4435
之前做出的步骤条是利用easyui +jquery实现的，但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效，所以换了一种方式，用Position。把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控...
html实现分步注册,jQuery带验证的分步式注册表单
weixin_28678831的博客
06-18 569
一款jQuery带验证的分步式注册表单的特效，一共有三个步骤，每一步骤的每个输入框都有一个验证，点击下一步的时候会出现验证的提示，都填写正确的时候才能进入下一步，整体效果还是挺好的，喜欢的小伙伴们请收下吧。查看演示下载资源：58次 下载资源下载积分：30积分页面的head部分，仅需引入两个CSS样式文件，代码如下： 页面的body部分，主...
jQuery滚动插件scrollable.js用法分析
12-03
本文实例讲述了jQuery滚动插件scrollable.js用法。分享给大家供大家参考，具体如下： Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容（HTML、视频、文件、图片等…）都可以作为一个滚动项。支持水平与垂直两种滚动方向。 用途：滚动效果，可制作分步验证页面 以下scrollable.js方法说明描述： 方法名称 返回值 说明 getConf() Object 返回scrollable的配置对象，并且可通过设置该对象的相关属性值来修改该配置对象的属性。 getIndex() number 获取当前滚动
基于jquery的滚动菜单(滚动条)的实现.
goosman-lei
12-03 7381
本来是打算做一个jquery插件, 只是本人水平属于那种欠扁级别的, 最近又比较忙, 没有时间学习jquery的插件开发, 所以, 做这么个小东西, 供大家玩乐, 呵呵.index.html是示例scripts下的scrollable.js是这个小东西的js(写的很烂, 没有什么参考价值的.)网络昵称: selfimpr个人博客: http://blog.csdn.net/lgg201E-
jQuery 控制表单里回车键 自动下一个标签
潇湘博客
01-27 1624
jQuery 控制表单里回车键 自动下一个标签默认情况下，在表单(form)的输入框(input)里按回车将会提交(submit)表单。这会造成一个问题：当用户在填写表单时不小心按了回车键(特别是输入框含有历史记录时，这种情况经常发生)，这时不完整的表单会被提交。我们可以通过Javascript来屏蔽回车键，这样当用户键入回车键，表单就不会被提交，而且我们还可以根据需要执行
jQuery拖拽插件dragscroll.js
06-01
《jQuery拖拽插件dragscroll.js：实现高效交互体验》 在网页设计与开发中，用户界面的交互性是至关重要的。一个优秀的交互设计能够提高用户体验，使用户更加便捷地浏览和操作网页内容。jQuery作为一款强大的...
jquery-scrollable.js 滚动 文本滚动
02-03
1. **引入依赖**：首先，确保在页面中引入jQuery库，如`jquery-1.8.0.js`，以及`jquery-scrollable.js`插件文件。 2. **CSS样式**：`style.css` 文件包含了插件所需的样式，应正确链接到HTML文档中，以确保滚动效果...
jquery.showuptrigger:一个jQuery插件，允许您在元素显示时设置回调函数
05-02
showuptrigger是一个jQuery插件，允许您在显示特定元素时设置回调函数。 简单的代码库（也许也是） 没有太多选择 也适用于溢出元素 用法 在jQuery之后添加jquery.showuptrigger- VERSION .min.js，如下所示 ...
JQueryEasyUI表单校验和jquery表单提交
qq_43243541的博客
09-03 524
JQueryEasyUI表单校验和jquery表单提交 1. 表单校验 首先看下效果图 在这里我需要在这个form表单提交的点击下一步之前，对这些文本框属性进行非空或者正则校验！话不多说，直接看源码 <form class="my-form" method="post" id="form-person"> <table class="my-table" style="tex...
scrollable.js
12-25
scrollable jquery ui 下载
jQuery滚动插件scrollable
12-03
Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容（HTML、视频、文件、图片等...）都可以作为一个滚动项。支持水平与垂直两种滚动方向。用途：滚动效果，可制作分步验证页面
jquery 上一步 下一步 完成 关闭
04-07
自己写的jquery 显示隐藏 上一步，下一步，完成，关闭文档
jQuery Tools Scrollable
追求卓越,做到专业
04-27 1179
参考链接 点击打开链接 var scrollable=$("div.scrollable").scrollable(); //alert(scrollable.getConf().prev);//获取配置对象中的prev属性 scrollable.getConf().speed=200;//设置配置对象的speed属性 //alert(scrollable.getI
jquery scrollable.js的使用及建议
ywj5200的专栏
11-14 3488
说实话，我一开始画页面的时候没有考虑到很多兼容问题，但是后期发现问题的时候就真的有些骑虎难下的感觉，尤其后期扫尾阶段，被测出一个大bug让我果断放弃使用这个控件，所以我在这里提一个Bug,我没有去测试解决办法，因为项目紧张，所以我就直接切回最原始的显示隐藏，果断放弃了这个定位移动的控件，所以建议如果是验证比较复杂的多步骤表单验证请慎重，那问题是什么呢？就是如果你在填写表单的过程中如果一直按tab键
jQueryTools Scrollable详解
先锋WEB技术
01-09 5999
在网页中加入各式各样的轮播广告都可以归结为滑动块的灵活使用，而jQueryTools提供了一套非常方便的滑动块解决方案，基本可以实现任何网页上的轮播图片或图片浏览功能。滑动块设置说明(scrollable) 属性 默认值 说明 clonedClass 'cloned' 当循环滑动时程序会自动复制一组滑动
scrollable滚动条向下滚动至底部
Yelbosh的专栏
06-23 3170
很多时候我们需要将滚动view的滚动条滚动至底部，如通话记录，下面介绍一下代码： 首先是取得scroller，其实像dataview、list、nestlist等都包含有scrallable，他是view和scroller的组合。我们要滚动就需要获得scroller scroller = Ext.getCmp("myRecord").getScrollable().getScrol
jquery 实现下一步
jwfdpfangdongping的专栏
01-27 180
sdf
用js做一个可以通过鼠标滚轮往下预览的表格
最新发布
04-04
以下是一个可以通过鼠标滚轮往下预览的表格的示例代码： ```html <!DOCTYPE html> <title>Scrollable Table #table-container { height: 400px; overflow-y: scroll; } table { width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值