来自 计算机网络 2019-09-04 19:49 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

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

正文实例呈报了jQuery下拉丁美洲化搜索表单效果。分享给大家供大家参照他事他说加以考察。具体如下:
JQuery下拉丁美洲化搜索表单样式代码是一款美化下拉框的表单,样式已写好,必要的恋人改一下就足以用了。
运作效果图:-------------------查看效果-------------------

正文实例汇报了jQuery达成表单步骤流程导航。分享给大家供我们参谋。具体如下:
jQuery表单步骤流程导航是一款多步骤进程,三个提交的落到实处一步一步填写表单提交音信代码,每一回填写完音讯时都会唤起是或不是交由,假使想对音信进行重复修改,也可以拓宽再次回到操作,页面效果简洁大方,红黑搭配很雅观,是一款特别实用的特效代码,值得大家学习。
运维效果图:-------------------翻看效果 下载源码-------------------

图片 1

图片 2

小提示:浏览器中借使不可能健康运营,可以品尝切换浏览格局。
为大家享受的jQuery下拉丁美洲化搜索表单效果代码如下

小提醒:浏览器中一经无法健康运作,能够尝尝切换浏览方式。
为我们大饱眼福的jquery达成的弹出层登陆和全屏层注册特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉美化搜索表单样式代码</title>

<link href="css/base.css" type="text/css" rel="stylesheet" />

<style type="text/css">
/* search */
.search{border:2px solid #f58400;height:35px;margin:40px auto 0 auto;width:525px;}
.search select{display:none;}
.search .select_box{font-size:12px;color:#999999;width:100px;line-height:35px;float:left;position:relative;}
.search .select_showbox{height:35px;background:url(images/search_ico.png) no-repeat 80px center;text-indent:1.5em;}
.search .select_showbox.active{background:url(images/search_ico_hover.png) no-repeat 80px center;}
.search .select_option{border:2px solid #f58400;border-top:none;display:none;left:-2px;top:35px;position:absolute;z-index:99;background:#fff;}
.search .select_option li{text-indent:1.5em;width:90px;cursor:pointer;}
.search .select_option li.selected{background-color:#F3F3F3;color:#999;}
.search .select_option li.hover{background:#BEBEBE;color:#fff;}

.search input.inp_srh,.search input.btn_srh{border:none;background:none;height:35px;line-height:35px;float:left}
.search input.inp_srh{outline:none;width:365px;}
.search input.btn_srh{background:#f58400;color:#FFF;font-family:"微软雅黑";font-size:15px;width:60px;}
</style>

</head>


<body>

<div class="search radius6">
 <form name="searchform" method="post" action="/e/search/index.php">
 <input name='ecmsfrom' type='hidden' value='9'>
 <input type="hidden" name="show" value="title,newstext">
 <select name="classid" id="choose">
  <option value="0">搜索全部</option>
  <option value="1">新闻中心</option>
  <option value="4">技术文档</option>
  <option value="22">下载中心</option>
 </select> 
 <input class="inp_srh" name="keyboard" placeholder="请输入您要搜索的作品" >
 <input class="btn_srh" type="submit" name="submit" value="搜索">
 </form>
</div>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>
<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完成表单步骤流程导航代码,希望大家能够欣赏。

您恐怕感兴趣的小说:

  • jQuery完毕购物车表单自动付钱效果实例
  • jquery达成表单输入时提示文字滑动向上效果
  • 基于jQuery通过jQuery.form.js插件使用ajax提交form表单
  • jquery使用ul模拟select达成表单美化的法子
  • jQuery+html5+css3达成圆角无刷新表单带输入验证成效代码
  • jQuery完毕动态表单验证时文本框抖动作效果果完全实例
  • jquery ajax 怎么着向jsp提交表单数据
  • jQuery复制表单成分附源码分享作用演示

你也许感兴趣的小说:

  • jquery达成表单验证并截留违规提交
  • jQuery自动增多表单项的措施
  • 依赖Jquery达成表单验证
  • jquery达成表单输入时提示文字滑动向上效果
  • jQuery落成的杰出表单效果代码
  • jQuery下拉丁美洲化寻觅表单效果代码分享
  • jQuery表单验证功用实例
  • jquery达成的客商注册表单提醒操作成效代码分享
  • jquery实现的弹出层登入和全屏层注册特效代码分享

本文由六合联盟网发布于计算机网络,转载请注明出处:jQuery实现表单步骤流程导航代码分享,jQuery下拉

关键词: