基于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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php 短链接算法收集与分析
2011/12/30 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python下载文件时显示下载进度的方法
2015/04/02 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Python项目打包成二进制的方法
2020/12/30 Python
儿媳婚宴答谢词
2014/01/14 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
女生节标语
2014/06/26 职场文书
个人工作保证书
2015/02/28 职场文书
教育读书笔记
2015/07/02 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Python中如何处理常见报错
2022/01/18 Python