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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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 ...

随机推荐

iOS开发常见错误解决方法
1.出现下面的错误: StoryboardApp[8593:207] Failed to instantiate the default view controller for UIMainStory ...
解决 502、504 Gateway Time-out(nginx)
一.504 Gateway Time-out问题常见于使用nginx作为web server的服务器的网站我遇到这个问题是在升级discuz论坛的时候遇到的一般看来, 这种情况可能是由于nginx ...
转：Android开发：使用JNI读取应用签名
博文转自http://www.tuicool.com/articles/UVjme2r,感谢博主的分享为了防止被反编译,打算把关键代码写到so里(比如加解密),在so里加上判断APk包签名是否一致的 ...
（转）A Survival Guide to a PhD
Andrej Karpathy blog About Hacker's guide to Neural Networks A Survival Guide to a PhD Sep 7, 2016 T ...
github上传本地项目
github上传本地项目,分为两个部分: 1.如果建立了ssh key的,直接看第二部分的上传部分就行了 2.如果没有建立ssh key的,就从头开始看吧 ——————————————————我是快乐 ...
Stream 和 byte[] 之间的转换
Stream 和 byte[] 之间的转换一. 二进制转换成图片 ? 1 2 3 4 5 MemoryStream ms = new MemoryStream(bytes); ms.Position ...
Ubuntu 14.04 (Trusty Tahr) LTS发布，附下载地址，各种镜像【bubuko.com】
Ubuntu 14.04 有很多的改进和新功能: 同时还发布几个不同版本:Ubuntu GNOME.Kubuntu.Xubuntu.Lubuntu.Edubuntu.Ubuntu Kylin.Ubun ...
ESXi查询网卡的驱动和固件版本
~ # esxcfg-nics -lName PCI Driver Link Speed Duplex MAC Address MTU Description vmnic0 0000:01:00.00 ...
CG Rendering v.s. Browser Rendering
浏览器的渲染技术 v.s. CG渲染器的渲染技术看了两篇文章: 浏览器的渲染原理简介, How browsers work(译文), 想到了一些东西, 对比两者, 或许有些东西能想得更明白些. 以下 ...
Eclipse插件安装方式及使用说明
拷贝安装方式 1.通过ECLIPSE_HOME\plugins安装在eclipse的主目录ECLIPSE_HOME, 比如在我的机器上安装的目录是:ECLIPSE_HOME有一个plugins的目录 ...

jQuery-表单流程导航

jQuery-表单流程导航的更多相关文章

随机推荐

热门专题