以下是 jQuery会员中心安全修改表单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery会员中心安全修改表单代码</title>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/style.js"></script>
</head>
<body>
<div class="Safety">
<dl>
<dt>
<strong>登录密码：</strong>
<span>保障账户安全，建议您定期更换密码</span>
<b><span class="glyphicon glyphicon-ok"> </span>已经设置</b>
<em>修改</em>
</dt>
<dd>
<form action="#" method="get">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">当前密码：</td>
<td><input type="text" class="safinput1" /> <span style="display:none;">直接在input后加span没问题</span></td>
</tr>
<tr>
<td width="35%" align="right">设置新密码：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">确认新密码：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><input type="submint" class="safSub" value="修改登录密码" /></td>
</tr>
</table>
</form>
</dd>
<dt>
<strong>交易密码：</strong>
<span>保障资金安全，建议您交易密码区别于登录密码</span>
<b><span class="glyphicon glyphicon-exclamation-sign"> </span>未设置 </b>
<em>修改</em>
</dt>
<dd>
<form action="#" method="get">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">设置交易密码：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">确认交易密码：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><input type="submint" class="safSub" value="修改登录密码" /></td>
</tr>
</table>
</form>
</dd>
<dt>
<strong>手机号码：</strong>
<span>保障账户与资金安全，是您在融合天下重要的身份凭证</span>
<b><span class="glyphicon glyphicon-ok"> </span>已经设置 </b>
<em>修改</em>
</dt>
<dd>
<ul class="Step">
<li class="stepCur"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<div class="clearfix"></div>
</ul><!--Step/-->
<form action="#" method="get" class="sjyz-one">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">手机号：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">验证码：</td>
<td><input type="text" class="safinput2" /> <button>点击获取</button></td>
</tr>
<tr>
<td width="35%" align="right">身份证号：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><a class="safSub sjyz-one-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<form action="#" method="get" class="sjyz-two">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">新手机号：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">验证码：</td>
<td><input type="text" class="safinput2" /> <button>点击获取</button></td>
</tr>
<tr>
<td width="35%" align="right">身份证号：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><a class="safSub sjyz-two-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<div class="sjyz-ok"><span class="glyphicon glyphicon-ok"></span> 恭喜您,设置成功!</div>
</dd>
<dt>
<strong>实名认证：</strong>
<span>保障账户安全，只有通过实名认证，才能充值投资、申请贷款</span>
<b><span class="glyphicon glyphicon-ok"> </span>已经设置 </b>
<em>修改</em>
</dt>
<dd>
<form action="#" method="get" enctype="multipart/form-data">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">用户名：</td>
<td>asdsdfasdf</td>
</tr>
<tr>
<td width="35%" align="right">真是姓名：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">身份证号：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">正面证件照</td>
<td><input type="file" name="_f" /> </td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td>
<img src="http://gb.cri.cn/mmsource/images/2004/08/26/nc040826017.jpg" width="280" height="188" />
</td>
</tr>
<tr>
<td width="35%" align="right">背面证件照</td>
<td><input type="file" name="_f" /> </td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td>
<img src="http://www.southcn.com/tech/gdkj/200403290037_609722.jpg" width="280" height="188" />
</td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><input type="submint" class="safSub" value="提交" /></td>
</tr>
</table>
</form>
</dd>
<dt>
<strong>电子邮箱：</strong>
<span>邮件接收账户通知，及时了解账户信息变动情况</span>
<b><span class="glyphicon glyphicon-exclamation-sign"> </span>未设置 </b>
<em>认证</em>
</dt>
<dd>
<ul class="Step">
<li class="stepCur"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<div class="clearfix"></div>
</ul><!--Step/-->
<form action="#" method="get" class="sjyz-one">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">邮箱验证：</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><a class="safSub sjyz-one-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<form action="#" method="get" class="sjyz-two">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">邮箱验证码：</td>
<td><input type="text" class="safinput2" /></td>
</tr>
<tr>
<td width="35%" align="right"> </td>
<td><a class="safSub sjyz-two-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<div class="sjyz-ok"><span class="glyphicon glyphicon-ok"></span> 恭喜您,设置成功!</div>
</dd>
</dl>
</div><!--Safety/-->
</body>
</html>
JS代码(style.js):
$(function(){
//鏈€鍚庝竴涓病鏈夎竟妗?$("nav dl:last,.shouyi dl:last").css("border","0");
//.bankList li 閾惰閫夋嫨$(".bankList li").click(function(){
$(this).addClass("banSty").siblings("li").removeClass("banSty");
}
)//娣诲姞閾惰鍗?$(".tianjiayinhang").click(function(){
$(".addYinhang").fadeIn();
}
)$(".glyphicon-remove").click(function(){
$(".addYinhang").fadeOut();
}
)//绔欏唴淇℃伅 鐐瑰嚮灞曞紑鏀惰捣鏁堟灉$(".znxx dt em").click(function(){
$(this).find("b").toggle();
$(this).find("i").toggle();
$(this).parents("dt").next("dd").toggle().siblings("dd").hide();
}
)//瀹夊叏璁剧疆 鎵嬫満鍙风爜涓嬩竴姝?$(".sjyz-one-next").click(function(){
$(this).parents("form").next(".sjyz-two").show();
$(this).parents(".sjyz-one").hide();
$(this).parents("dd").find(".Step li:eq(1)").addClass("stepCur");
}
)$(".sjyz-two-next").click(function(){
$(this).parents(".sjyz-two").hide();
$(this).parents("form").prev(".sjyz-one").hide();
$(this).parents("dd").find(".sjyz-ok").show();
$(this).parents("dd").find(".Step li:eq(2)").addClass("stepCur");
}
)// 瀹夊叏璁剧疆 鐐瑰嚮灞曞紑鏀惰捣鏁堟灉$(".Safety dt em").click(function(){
$(this).parents("dt").next("dd").toggle().siblings("dd").hide();
}
)}
)function next(){
document.write("<a href='javascript:history.go(-1)'>鍚庨€€</a>
<a href='javascript:history.go(0)'>鍒锋柊</a>
<a href='javascript:history.go(1)'>鍓嶈繘</a> <form> <input name='ht' type='button' onclick='javascript:history.go(-1)' value='鍚庨€€' /> <input name='sx' type='button' onclick='javascript:history.go(0)' value='鍒锋柊' /> <input name='qj' type='button' onclick='javascript:history.go(1)' value='鍓嶈繘' /> </form> ");
}
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,select{margin:0;padding:0;border:0;}
table{border-collapse:collapse;}
body{font-family:"寰蒋闆呴粦";font-size:1.2em;background:#F0EFF4;}
img,a{border:0;text-decoration:none;}
ol,ul{list-style:none;}
.clears{clear:both;}
a{color:#333;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out;}
a:hover{color:#f60;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;transition:all .3s ease-out;}
img{max-width:100%;}
.Safety dl{}
.Safety input{border:0;}
.Safety dt{font-size:14px;padding:7px 0;border-bottom:#ddd 1px dotted;height:44px;line-height:30px;}
.Safety dt strong{display:inline-block;padding:0 20px;height:30px;}
.Safety dt span{display:inline-block;height:30px;padding:0 10px;font-weight:400;font-size:12px;color:#999;width:365px;}
.Safety b{display:inline-block;width:105px;padding:0 10px;background:#E1F3FD;font-size:14px;font-weight:400;}
.Safety dt b span{display:inline-block;width:20px;height:20px;line-height:20px;background:#94CE25;text-align:center;font-size:12px;color:#fff;padding:0;border-radius:10px;/* 鎵€鏈夎閮戒娇鐢ㄥ崐寰勪负5px鐨勫渾瑙掞紝姝ゅ睘鎬т负CSS3鏍囧噯灞炴€?*/
-moz-border-radius:10px;/* Mozilla娴忚鍣ㄧ殑绉佹湁灞炴€?*/
-webkit-border-radius:10px;/* Webkit娴忚鍣ㄧ殑绉佹湁灞炴€?*/
margin-right:5px;}
.Safety dt b span.glyphicon-exclamation-sign{background:#FFB027;}
.Safety dt em{float:right;width:150px;text-align:right;height:30px;line-height:30px;font-style:normal;color:#06F;cursor:pointer;padding:0 30px;}
.Safety dd{padding:15px 0;background:#F3F6FA;display:none;}
.safForm{background:#F3F6FA;}
.safForm td{padding:5px;}
.safinput1{border:#D8D8D8 1px solid;background:#fff;height:26px;width:210px;border-radius:2px;/* 鎵€鏈夎閮戒娇鐢ㄥ崐寰勪负5px鐨勫渾瑙掞紝姝ゅ睘鎬т负CSS3鏍囧噯灞炴€?*/
-moz-border-radius:2px;/* Mozilla娴忚鍣ㄧ殑绉佹湁灞炴€?*/
-webkit-border-radius:2px;/* Webkit娴忚鍣ㄧ殑绉佹湁灞炴€?*/
}
.safSub{width:130px;padding:5px 10px;background:#f60;color:#fff;font-size:16px;text-align:center;border-radius:5px;/* 鎵€鏈夎閮戒娇鐢ㄥ崐寰勪负5px鐨勫渾瑙掞紝姝ゅ睘鎬т负CSS3鏍囧噯灞炴€?*/
-moz-border-radius:5px;/* Mozilla娴忚鍣ㄧ殑绉佹湁灞炴€?*/
-webkit-border-radius:5px;/* Webkit娴忚鍣ㄧ殑绉佹湁灞炴€?*/
cursor:pointer;}
.safSub:hover{background:#900;color:#fff;}
.safinput2{border:#D8D8D8 1px solid;background:#fff;height:26px;width:150px;border-radius:2px;/* 鎵€鏈夎閮戒娇鐢ㄥ崐寰勪负5px鐨勫渾瑙掞紝姝ゅ睘鎬т负CSS3鏍囧噯灞炴€?*/
-moz-border-radius:2px;/* Mozilla娴忚鍣ㄧ殑绉佹湁灞炴€?*/
-webkit-border-radius:2px;/* Webkit娴忚鍣ㄧ殑绉佹湁灞炴€?*/
}
/*瀹夊叏璁剧疆 鎵嬫満鍙风爜鏍峰紡*/
.Step{width:70%;margin:10px auto;margin-bottom:30px;}
.Step li{float:left;width:33%;height:4px;background:#ccc;text-align:center;}
.Step li span{display:inline-block;width:24px;height:24px;font-size:12px;text-align:center;line-height:24px;border-radius:12px;/* 鎵€鏈夎閮戒娇鐢ㄥ崐寰勪负5px鐨勫渾瑙掞紝姝ゅ睘鎬т负CSS3鏍囧噯灞炴€?*/
-moz-border-radius:12px;/* Mozilla娴忚鍣ㄧ殑绉佹湁灞炴€?*/
-webkit-border-radius:12px;/* Webkit娴忚鍣ㄧ殑绉佹湁灞炴€?*/
background:#ccc;position:relative;bottom:10px;color:#fff;}
.Step li.stepCur,.Step li.stepCur span{background:#f60;}
.sjyz-two{display:none;}
.sjyz-ok{text-align:center;font-size:20px;display:none;}
.sjyz-ok span{display:inline-block;width:40px;line-height:40px;color:#fff;background:#94CE25;text-align:center;line-height:40px;border-radius:20px;/* 鎵€鏈夎閮戒娇鐢ㄥ崐寰勪负5px鐨勫渾瑙掞紝姝ゅ睘鎬т负CSS3鏍囧噯灞炴€?*/
-moz-border-radius:20px;/* Mozilla娴忚鍣ㄧ殑绉佹湁灞炴€?*/
-webkit-border-radius:20px;/* Webkit娴忚鍣ㄧ殑绉佹湁灞炴€?*/
}
/*姝ゆ牱寮忓湪绐楀彛灏忎簬768px鐨勬椂鍊欑敓鏁?/@media screen and (max-width:768px){/*768*1024*/
.flrLeft dl{width:270px;margin:0 auto;}
.flrLeft dt,.flrLeft dd{text-align:left;float:none;}
.addYinhang{width:300px;margin:-144px 0 0 -151px;}
.Safety dt em{padding:0 5px;width:60px;}
.Safety dd{font-size:12px;}
}
/*姝ゆ牱寮忓湪绐楀彛灏忎簬768px鐨勬椂鍊欑敓鏁?/@media screen and (max-width:640px){/*768*1024*/
.Safety dt span{display:none;}
.Safety dt em{padding:0 5px;width:60px;}
.Safety dd{font-size:12px;}
}
分享到QQ
分享到微博
微信扫一扫
