jQuery-表单流程导航
前言：以前做过一个项目，里面牵涉到流程相关的业务，需要用到流程页面导航的效果，完整的工作流相关的项目以前也做过，需要用到第三方插件，当然这里记录的业务需求没这个麻烦，仅仅需要能有一个页面导航的标题栏，清晰的表达出来现在的业务流程页面到达那一步就行了，所以，关键就在于流程导航标题栏怎么控制了，自己最初的思路是使用不同的图片（代表开始、结束、完成、当前等几个环节）然后根据流程到达那一步了，来控制显示对应的流程标题栏。这种思路最初也能实现对应的需求，不过不灵活，从网上找到了一些更好的例子，淘宝、京东等都有类似的实现，使用一张图，然后通过CSS样式来实现流程导航标题栏的效果图。也许以后在别的项目中也会再遇到类似的业务场景把！现将这种实现的思路记录下来，以备后用。
1:为了方便实例的演示，将所有演示所需的几个静态文件放在了同一个目录下了
2:index.html文件，此小白例演示的主页面，同一个页面通过隐藏、显示来控制流程的流转效果
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单流程导航</title>
<!-- 引入jQeruy库文件 -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入jQeruy库文件 -->
<script type="text/javascript" src="progress.js"></script>
<!-- 引入流程导航的JS文件 -->
<script type="text/javascript" src="progress.js"></script>
<!-- 引入流程导航的CSS文件 -->
<link type="text/css" rel="stylesheet" href="progress.css"></link>
</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">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a>（做项目时需要实现类似的功能，参考分析了此页面的实现方式，添加了一些注释）</p>
</div>
</body>
</html>
3:progress.css文件，这个文件主要用来提供流程标题栏的展现样式，比较关键
*{margin:;padding:;list-style-type:none;}
a,img{border:;}
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(progressBar.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;}
4:progress.js文件，主要控制页面流程的前进或者后退的流转效果，代码相对简单，注释也比较清楚，不再多言
/*
编写的思路：
1：初始化流程导航的首页，显示流程第一步的页面，流程导航栏显示流程为第一步
2：流程往前走或者往后走的时候，控制显示流程的当前页面隐藏流程上一页或者下一页，控制流程导航栏跟进变化
3：这里的实现是在同一个页面控制多个页面片段的隐藏与展现来实现流程的流动的，也可以利用多个页面来实现这种控制 4: 这里仅仅提供了一种实现流程导航的简单思路——控制流程的导航栏的显示效果、控制流程导航对应页面的隐藏和显示来控制一个流程导航的展现。
5：one/two/three是流程的正向步数也是对应的页面的片段的ID，reone/retwo/rethree是流程反向流动的控制方法，grxx/zjxx/qzxx/qzfs是导航栏中对应的导航标题信息
6：实际的流程比这复杂的多，不过实现的基本思路是类似的
*/ /*
第一步的提交方法
*/
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");
}
}
5:progressBar.png文件，是辅助展示流程导航标题栏的图片
6:如下是此实例演示的效果图
7:小结
此例代码、思路相对简单，不过有关流程标题栏的实现，我觉得比较棒，一张图+CSS就能完全展现一个流程标题栏的效果，并且十分的灵活，不受流程图的环节个数的限制，并且想改变流程标题栏的样式也非常的简单，再做出一张图就行了。
jQuery-表单流程导航的更多相关文章
- Jquery表单提交后获取返回Json值
1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- angularjs compile和link
原文:http://www.cnblogs.com/GoodPingGe/p/4361354.html ************************************************ ...
- kuangbin_SegTree D (POJ 2528)
讲道理我之前暂时跳过染色的题是因为总觉得有什么很高端的算法来query 直到我做了F题(ZOJ 1610)才发现就是个暴力统计.....也对 也就几万个长度单位而已.... F就不po上来了 选了有点 ...
- matchesSelector 匹配选择器表达式sizzle的实现
Sizzle.matchesSelector = function( node, expr ) { return Sizzle( expr, null, null, [node] ).leng ...
- 安装Linux 16.04 时，选择好分区后，进到选择地点的界面后，总是闪退，退到最原始的界面
这两天装 Linux 系统,总是遇到一个很蛋疼的问题: 当你累死累活把分区什么的都设置好了之后,在输入了系统名字,开机密码那几项之后,再选择地点的时候(如:选择 "上海"),然后就 ...
- etcd第二集
参考文章:https://github.com/coreos/etcd/blob/master/Documentation/v2/api.mdhttp://www.cnblogs.com/zhengr ...
- Object类的toString方法
Object类是所有Java类的祖先.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个类的方法.在不明确给出超类的情况下,Java会自动把Object作为要定义类的超类 ...
- linux下vi命令修改文件及保存的使用方法
进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi n filename :打开文件,并将光标置于第n行首 vi filename :打开文件,并将光标置于一行首 v ...
- [Andriod] - Andriod Studio + 逍遥模拟器
Andriod Studio自身自带的模拟器实在太卡,用Genymotion模拟器又要安装VirtualBox,然后一堆的设置,结果还是卡B. 网上下了个逍遥模拟器,这模拟器是游戏专用的,目前正式版的 ...
- 认识UML类图元素
在Visio里,包和类的关系是包含关系,将类拖入包的文件夹之后,关系就建立了,二元关联符号可以设置为:聚合.合成.接口:空心圆+直线(唐老鸭类实现了‘讲人话’):依赖:虚线+箭头(动物和空气的关系): ...
- LeetCode "468. Validate IP Address"
it is all about corner-cases... class Solution(object): def validIP4(self, IP): def validNum4(s): tr ...