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


Posted in Javascript onAugust 26, 2015

先给大家展示效果图,需要的朋友可以下载源码哦~

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

查看演示        下载源码

HTML

首先要载入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表单内容。限于篇幅本文没有列出表单具体内容。

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); 
});
Javascript 相关文章推荐
nullJavascript中创建对象的五种方法实例
May 07 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
jQuery带时间的日期控件代码分享
Aug 26 #Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 #Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 #Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 #Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 #Javascript
纯javascript实现分页(两种方法)
Aug 26 #Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
也谈截取首页新闻 - 范例
2006/10/09 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python脚本实时处理log文件的方法
2016/11/21 Python
浅谈flask源码之请求过程
2018/07/26 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python elasticsearch环境搭建详解
2019/09/02 Python
django 模型中的计算字段实例
2020/05/19 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
大学生最常用的自我评价
2013/12/07 职场文书
国培计划培训感言
2014/03/11 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
股份转让协议书范本
2015/01/27 职场文书
道歉信范文
2015/05/12 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
《绝招》教学反思
2016/02/20 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript