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 相关文章推荐
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
Vue组件化开发思考
Feb 02 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
JS实现随机点名器
Apr 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
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
python如何统计序列中元素
2020/07/31 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python 为什么说eval要慎用
2019/03/26 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
电力安全事故反思
2014/04/27 职场文书
教师节活动总结
2014/08/29 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
作弊检讨书
2015/01/27 职场文书
礼仪培训心得体会
2016/01/22 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技