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 相关文章推荐
javascript一点特殊用法
May 28 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
详解python中的异常捕获
2020/12/15 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
物流司机岗位职责
2013/12/28 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
党校毕业心得体会
2014/09/13 职场文书
认错检讨书
2014/10/02 职场文书
滴水洞导游词
2015/02/10 职场文书
团委工作总结2015
2015/04/02 职场文书
婚庆答谢词大全
2015/09/29 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
AJAX实现省市县三级联动效果
2021/10/16 Javascript
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python