快捷導(dǎo)航

jQuery實現(xiàn)表單步驟流程導(dǎo)航代碼分享

更新時間：2015年08月28日 10:56:39 投稿：lijiao

這篇文章主要介紹了jQuery實現(xiàn)表單步驟流程導(dǎo)航，代碼實現(xiàn)效果簡單精致，推薦給大家，有需要的小伙伴可以參考下。

本文實例講述了jQuery實現(xiàn)表單步驟流程導(dǎo)航。分享給大家供大家參考。具體如下：
jQuery表單步驟流程導(dǎo)航是一款多步驟進度，多個提交的實現(xiàn)一步一步填寫表單提交信息代碼，每次填寫完信息時都會提醒是否提交，如果想對信息進行再次修改，也可以進行返回操作，頁面效果簡潔大方，紅黑搭配很經(jīng)典，是一款非常實用的特效代碼，值得大家學(xué)習(xí)。
運行效果圖：-------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery實現(xiàn)的彈出層登錄和全屏層注冊特效代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表單步驟流程導(dǎo)航</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
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");
 }
}
</script>

<style type="text/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(img/barbg.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;}
</style>

</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">聯(lián)系電話</td>
  <td><input class="pwdTrigger" type="text" placeholder="請輸聯(lián)系電話，建議是手機號碼" /></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">
</div>
</body>
</html>

以上就是為大家分享的jQuery實現(xiàn)表單步驟流程導(dǎo)航代碼，希望大家可以喜歡。

您可能感興趣的文章: