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 ...
随机推荐
- cloudera manager安装spark后使用spark shell编写基于scala的world count
val file = sc.textFile("hdfs://zhcloudil-lcnode04:8020/user/cloudil/wc_spark.txt") val cou ...
- HDU-4057 Rescue the Rabbit（AC自动机+DP）
Rescue the Rabbit Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- Windows环境下安装pip，方便你的开发
1.在以下地址下载最新的PIP安装文件:http://pypi.python.org/pypi/pip#downloads 2.解压安装 3.下载Windows的easy installer,然后安装 ...
- 迭代器模式（Iterator Pattern）
迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示. 迭代器模式(Iterator)就是分离了聚合对象的遍历行为,抽象出一个迭代器来负责这样既可以 ...
- Hive 中parse_url的使用
1.Hive的parse_url函数 parse_url(url, partToExtract[, key]) - extracts a part from a URL 解析URL字符串,partTo ...
- js生成二维码（jquery自带）
//引入js<script type="text/javascript" src="js/jquery.js"></script> &l ...
- 使用npm安装一些包失败了的看过来（npm国内镜像介绍）
这个也是网上搜的,亲自试过,非常好用! 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set reg ...
- eclipse svn插件地址
http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240
- C#实现略缩图
public class GenerateThumbnail { private Image imageFrom; /// <summary> /// 源图的路径(含文件名及扩展名 /// ...
- docker存储结构解析
由于aufs并未并入内核,故而目前只有Ubuntu系统上能够使用aufs作为docker的存储引擎,而其他系统上使用lvm thin provisioning(overlayfs是一个和aufs类似的 ...