jQuery实现表单步骤流程导航代码分享
更新时间：2015年08月28日 10:56:39 投稿：lijiao
这篇文章主要介绍了jQuery实现表单步骤流程导航，代码实现效果简单精致，推荐给大家，有需要的小伙伴可以参考下。
本文实例讲述了jQuery实现表单步骤流程导航。分享给大家供大家参考。具体如下：
jQuery表单步骤流程导航是一款多步骤进度，多个提交的实现一步一步填写表单提交信息代码，每次填写完信息时都会提醒是否提交，如果想对信息进行再次修改，也可以进行返回操作，页面效果简洁大方，红黑搭配很经典，是一款非常实用的特效代码，值得大家学习。
运行效果图：-------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现的弹出层登录和全屏层注册特效代码如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单步骤流程导航</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">联系电话</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">
</div>
</body>
</html>
以上就是为大家分享的jQuery实现表单步骤流程导航代码，希望大家可以喜欢。
相关文章
本文给大家分享一款jquery实现的完美拖拽(拖动div层效果)，如果你正在找这类效果不妨进入参考一下。2015-06-06
今天小编就为大家分享一篇jQuery中将json数据显示到页面表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-05-05
支持PC端手机端幻灯片代码是一款支持移动触摸，支持鼠标拖拽切换，支持带进度条的自动播放模式，本文给大家分享一款基于jquery代码实现支持pc端手机端幻灯片代码，感兴趣的朋友一起学习吧2015-11-11
新版的jquery中，live()方法已经被删除了，所以在调用的时候会提示该函数不存在，下面有个不错的解决方法，大家可以参考下2014-02-02
这篇文章主要介绍了Jquery对select的增、删、改、查操作的方法,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)的相关资料,需要的朋友可以参考下2016-01-01
当客户端用户切换输入法至全角时可能您的表单提交会有漏洞哦！不过事实上js有这功能 可以将其转换为非全角字符！2009-07-07
这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了jQuery实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
在提交表单前、焦点转移后或者 keyup 时往往需要对输入的文本就行检验，如果输入内容不符合相关约定则要进行提示或警告，有一个叫 jCallout 的插件可以轻松实现该功能，该插件基于 jQuery 使用，所以使用前需要添加引用 jQuery2013-09-09
最新评论