jQuery-表单流程导航

2019独角兽企业重金招聘Python工程师标准>>>

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: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(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就能完全展现一个流程标题栏的效果，并且十分的灵活，不受流程图的环节个数的限制，并且想改变流程标题栏的样式也非常的简单，再做出一张图就行了。

转载于:https://my.oschina.net/wangdaoliang/blog/891079

jQuery-表单流程导航

猜你喜欢