澳门新浦京8455comjQuery实现表单步骤流程导航代码分享,jquery表单

那是一款基于jQuery
的星级评分效果实例,鼠标滑过轻易区域展现批评音讯提交内容,适用在商议表单里面,是表单美化提交内容的一种客户体验设计。

jQuery达成表单步骤流程导航代码共享,jquery表单

正文实例呈报了jQuery落成表单步骤流程导航。分享给大家供我们仿照效法。具体如下:
jQuery表单步骤流程导航是一款多步骤进程,四个提交的达成一步一步填写表单提交消息代码,每一次填写完音信时都会唤起是不是交付,要是想对消息举办双重修改,也足以扩充重返操作,页面效果简洁大方,红黑搭配很精髓,是一款特别实用的特效代码,值得我们学习。
运行效果图:——————-查看效果 下载源码——————-

澳门新浦京8455com 1

小提醒:浏览器中只要无法平日运转,能够尝试切换浏览方式。
为我们狼吞虎餐的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落成表单步骤流程导航。分享给大家供大家仿照效法。具体如下:
jQuery表…

为大家享用的jQuery知足度星级评价插件特效代码如下

headmeta "Content-Type" content="text/html; charset=utf-8" /title满意度jQuery星级评分插件/titlescript type="text/javascript" src="js/jquery-1.4.2.min.js"/scriptscript type="text/javascript" src="js/comment.js"/script/headbodystyle type="text/css"*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif;}/*quiz style*/.quiz{border:solid 1px #ccc;height:270px;width:772px;}.quiz h3{font-size:14px;line-height:35px;height:35px;border-bottom:solid 1px #e8e8e8;padding-left:20px;background:#f8f8f8;color:#666;position:relative;}.quiz_content{padding-top:10px;padding-left:20px;position:relative;height:205px;}.quiz_content .btm{border:none;width:100px;height:33px;background:url(images/btn.gif) no-repeat;margin:10px 0 0 64px;display:inline;cursor:pointer;}.quiz_content li.full-comment{position:relative;z-index:99;height:41px;}.quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}.quiz_content li.cate_l dl dt{float:left;}.quiz_content li.cate_l dl dd{float:left;padding-right:15px;}.quiz_content li.cate_l dl dd label{cursor:pointer;}.quiz_content .l_text{height:120px;position:relative;padding-left:18px;}.quiz_content .l_text .m_flo{float:left;width:47px;}.quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}.quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}/*goods-comm-stars style*/.goods-comm{height:41px;position:relative;z-index:7;}.goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0px;left:0;width:400px;}.goods-comm-stars .star_l{float:left;display:inline-block;margin-right:5px;display:inline;}.goods-comm-stars .star_choose{float:left;display:inline-block;}/* rater star */.rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}.rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}.rater-star-item{background-position: -100% -100%;}.rater-star-item-hover{background-position:0 -48px;cursor:pointer;}.rater-star-item-current{background-position:0 -48px;cursor:pointer;}.rater-star-item-current.rater-star-happy{background-position:0 -25px;}.rater-star-item-hover.rater-star-happy{background-position:0 -25px;}.rater-star-item-current.rater-star-full{background-position:0 -72px;}/* popinfo */.popinfo{display:none;position:absolute;top:30px;background:url(images/comment/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}.popinfo .info-box{border:1px solid #f00;border-top:0;padding:0 5px;color:#F60;background:#FFF;}.popinfo .info-box div{color:#333;}.rater-click-tips{font:12px/25px;color:#333;margin-left:10px;background:url(images/comment/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}.rater-click-tips span{display:block;background:#FFF9DD url(images/comment/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}.rater-star-item-tips{background:url(images/comment/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}.cur.rater-star-item-tips{display:block;} .rater-star-result{color:#FF6600;font-weight:bold;padding-left:10px;float:left;}/stylecenterbrdiv  h3我要评论/h3 div  form action="" method="post" div  div  span 满意度:/span div /div /div /div div  label 内 容:/label textarea name="" /textarea span 字数限制为5-200个/span /div button type="submit"/button /form /div!--quiz_content end--/div!--quiz end--/center/body/html

运维效果图:

效果演示 源码下载

如上正是为大家分享的jQuery满足度星级评价插件特效代码,希望我们能够赏识。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图