基于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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
Z-Blog中用到的js代码
Mar 15 Javascript
判断用户是否在线的代码
Mar 05 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python实现AES加密与解密
2019/03/28 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
JAVA和C++的区别
2013/10/06 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis