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实现表单步骤流程导航代码,希望大家可以喜欢。

Javascript 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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
You might like
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
Laravel find in set排序实例
2019/10/09 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
Express的路由详解
2015/12/10 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python requests模块cookie实例解析
2020/04/14 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
会话Bean的种类
2013/11/07 面试题
护士自我鉴定范文
2013/10/06 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
政府四风问题整改措施
2014/10/04 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
vue3获取当前路由地址
2022/02/18 Vue.js
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android