基于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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
浅析javascript的return语句
Dec 15 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php自定义hash函数实例
2015/05/05 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
jQuery中$原理实例分析
2018/08/13 jQuery
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python爬取内容存入Excel实例
2019/02/20 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
简历中个人自我评价范文
2013/12/26 职场文书
小学母亲节活动方案
2014/03/14 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
党员作风建设自查报告
2014/10/23 职场文书
教师师德表现自我评价
2015/03/05 职场文书
高中运动会前导词
2015/07/20 职场文书
外科护士长工作总结
2015/08/12 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python