基于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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
js获取class的所有元素
Mar 28 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 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
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python中进程和线程的区别详解
2017/10/29 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Python下简易的单例模式详解
2019/04/08 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python dict乱码如何解决
2020/06/07 Python
Python进行统计建模
2020/08/10 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
python之随机数函数的实现示例
2020/12/30 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
技术总监管理职责范本
2014/03/06 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js