jQuery实现表单步骤流程导航代码分享


Posted in Javascript onAugust 28, 2015

本文实例讲述了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实现表单步骤流程导航代码,希望大家可以喜欢。

Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 #Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 #Javascript
jquery实现多条件筛选特效代码分享
Aug 28 #Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 #Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 #Javascript
谈谈JavaScript中function多重理解
Aug 28 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python追加元素到列表的方法
2015/07/28 Python
Python pymongo模块用法示例
2018/03/31 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python交易记录链的实现过程详解
2019/07/03 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
公司承诺书格式
2014/05/21 职场文书
2014年实习生工作总结
2014/11/27 职场文书
维稳承诺书
2015/01/20 职场文书