首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现表单步骤流程导航代码分享

Posted in Javascript onAugust 28, 2015

本文实例讲述了jQuery实现表单步骤流程导航。分享给大家供大家参考。具体如下：
jQuery表单步骤流程导航是一款多步骤进度，多个提交的实现一步一步填写表单提交信息代码，每次填写完信息时都会提醒是否提交，如果想对信息进行再次修改，也可以进行返回操作，页面效果简洁大方，红黑搭配很经典，是一款非常实用的特效代码，值得大家学习。
运行效果图：-------------------查看效果 下载源码-------------------

jQuery实现表单步骤流程导航代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现的弹出层登录和全屏层注册特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单步骤流程导航</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function one() {
 if (confirm("确定提交？")) {
 $("#one").hide();
 $("#two").show();
 $("#grxx").attr("class","current_prev");
 $("#zjxx").attr("class","current");
 }
}

function two() {
 if (confirm("确定提交？")) {
 $("#two").hide();
 $("#three").show();

 $("#grxx").attr("class","done");
 $("#zjxx").attr("class","current_prev");
 $("#qzxx").attr("class","current");
 }
}

function three() {
 if (confirm("确定提交？")) {
 $("#three").hide();
 $("#four").show();

 $("#grxx").attr("class","done");
 $("#zjxx").attr("class","done");
 $("#qzxx").attr("class","current_prev");
 $("#qzfs").attr("class","current");
 }
}

function reone() {
 if (confirm("确定返回？")) {
 $("#one").show();
 $("#two").hide();
 $("#grxx").attr("class","current");
 $("#zjxx").attr("class","");
 }
}
function retwo() {
 if (confirm("确定返回？")) {
 $("#three").hide();
 $("#two").show();
 $("#grxx").attr("class","current_prev");
 $("#zjxx").attr("class","current");
 $("#qzxx").attr("class","");
 }
}
function rethree() {
 if (confirm("确定返回？")) {
 $("#four").hide();
 $("#three").show();
 $("#grxx").attr("class","done");
 $("#zjxx").attr("class","current_prev");
 $("#qzxx").attr("class","current");
 $("#qzfs").attr("class","last");
 }
}
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.formbox{width:488px;margin:40px auto;}
.formcon{padding:10px 0;border:solid 1px #ddd}
.formcon table input{width:200px;}
.formcon table td{padding:5px;line-height:24px;}
/* flow_steps */
.flow_steps{height:23px;overflow:hidden;}
.flow_steps li{float:left;height:23px;padding:0 40px 0 30px;line-height:23px;text-align:center;background:url(img/barbg.png) no-repeat 100% 0 #E4E4E4;font-weight:bold;}
.flow_steps li.done{background-position:100% -46px;background-color:#FFEDA2;}
.flow_steps li.current_prev{background-position:100% -23px;background-color:#FFEDA2;}
.flow_steps li.current{color:#fff;background-color:#990D1B;}
.flow_steps li#qzfs.current,.flow_steps li.last{background-image:none;}
</style>

</head>
<body>

<div class="formbox">
 <div class="flow_steps">
 <ul>
 <li id="grxx" class="current">个人信息</li>
 <li id="zjxx" >证件信息</li>
 <li id="qzxx">签注信息</li>
 <li id="qzfs" class="last">取证方式</li>
 </ul>
 </div>
 <div class="formcon">
 <div id="one">
 <table align="center">
 <tr>
  <td align="right" width="140px">户口所在地：</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入户口所在地" /></td>
 </tr>
 <tr>
  <td align="right">中文姓：</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入中文姓" /></td>
 </tr>
 <tr>
  <td align="right">中文名：</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入中文名" /></td>
 </tr>
 <tr>
  <td align="right">身份证号：</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入身份证号码" /></td>
 </tr>
 <tr>
  <td></td>
  <td><button type="button" onclick="one()">提交</button></td>
 </tr>
 </table>
 </div>
 <div id="two" style="display:none">
 <table align="center">
 <tr>
  <td align="right" width="140px">通行证号</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入证件号码" /></td>
 </tr>
 <tr>
  <td align="right">有效日期至</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入证件号码" /></td>
 </tr>
 <tr>
  <td align="right">联系电话</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输联系电话，建议是手机号码" /></td>
 </tr>
 <tr>
  <td></td> 
  <td><button type="button" onclick="two()">提交</button>    <button type="button" onclick="reone()">上一步</button></td>
 </tr>
 </table>
 </div>
 <div id="three" style="display:none">
 <table align="center">
 <tr>
  <td align="right" width="140px">签注类别</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入签注类别" /></td>
 </tr>
 <tr>
  <td align="right">前往地</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入前往地" /></td>
 </tr>
 <tr>
  <td align="right">签证种类</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入签注种类" /></td>
 </tr>
 <tr>
  <td></td> 
  <td><button type="button" onclick="three()">提交</button>    <button type="button" onclick="retwo()">上一步</button></td>
 </tr>
 </table>
 </div>
 <div id="four" style="display:none">
 <table align="center">
 <tr>
  <td align="right" width="140px">取证方式</td>
  <td><input class="pwdTrigger" type="text" placeholder="请输入取证方式" /></td>
 </tr>
 <tr>
  <td></td> 
  <td><button type="button" onclick="">提交</button>    <button type="button" onclick="rethree()">上一步</button></td>
 </tr>
 </table>
 </div>
 </div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的jQuery实现表单步骤流程导航代码，希望大家可以喜欢。

jQuery实现表单步骤流程导航代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
js实现日历
Nov 07 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 #Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 #Javascript
jquery实现多条件筛选特效代码分享
Aug 28 #Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 #Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 #Javascript
谈谈JavaScript中function多重理解
Aug 28 #Javascript
类加载器(1) Launch Mode(1) 加密(1) apt命令(1) logging(1) Pickle(1) 解密(1) hashlib(1) netty(1) NoSQL(1)
You might like
php 生成WML页面方法详解
2009/08/09 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JS实现的表格操作类详解(添加，删除，排序，上移，下移)
2015/12/22 Javascript
Bootstrap每天必学之附加导航（Affix）插件
2016/04/25 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
jQuery实现优雅的弹窗效果（6）
2017/02/08 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
党支部承诺书范文
2014/03/28 职场文书
2019广播稿怎么写
2019/04/17 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
PHP设计模式(观察者模式)
2021/07/07 PHP
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android