前言：以前做過一個項目，里面牽涉到流程相關的業務，需要用到流程頁面導航的效果，完整的工作流相關的項目以前也做過，需要用到第三方插件，當然這里記錄的業務需求沒這個麻煩，僅僅需要能有一個頁面導航的標題欄，清晰的表達出來現在的業務流程頁面到達那一步就行了，所以，關鍵就在於流程導航標題欄怎么控制了，自己最初的思路是使用不同的圖片（代表開始、結束、完成、當前等幾個環節）然后根據流程到達那一步了，來控制顯示對應的流程標題欄。這種思路最初也能實現對應的需求，不過不靈活，從網上找到了一些更好的例子，淘寶、京東等都有類似的實現，使用一張圖，然后通過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: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就能完全展現一個流程標題欄的效果，並且十分的靈活，不受流程圖的環節個數的限制，並且想改變流程標題欄的樣式也非常的簡單，再做出一張圖就行了。