JS组件系列——显示隐藏密码切换的jQuery插件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>可显示隐藏密码切换的jQuery插件</title>
<style type="text/css">
*{margin:;padding:;}
body{font:14px Arial, sans-serif;color:#;}
input{font-family:Arial, sans-serif;}
.login{width:270px;margin:40px auto auto;padding:30px 40px;background-color:#f7f7f7;}
.login ul{list-style-type:none;}
.login li{padding:10px ;overflow:hidden;}
.login .li3, .login .li5{text-align:right;font-size:12px;}
.login .li3 input{width:13px;height:13px;margin: 3px 10px;vertical-align:middle;}
.login .submit{display:block;width:%;padding:6px ;border: none;color:#fff;background-color:#4d90fe;cursor:pointer;}
#email, #password{width:214px;padding:5px;border:1px solid #ccc;}
.forgot{color:#;}
</style>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery/toggle-password.js"></script>
<script type="text/javascript">
$(function(){
$('#password').togglePassword({
el: '#togglePassword'
});
});
</script>
</head>
<body>
<div class="login">
<ul>
<li><span><label for="email">邮箱:</label></span><input id="email" type="text" placeholder="请输入邮箱地址" /></li>
<li><span><label for="password">密码:</label></span><input id="password" type="password"></li>
<li class="li3"><input type="checkbox" id="remember"><label for="remember">记住密码</label> <input type="checkbox" id="togglePassword"><label for="togglePassword">显示密码</label></li>
<li class="li4"><input class="submit" type="submit" value="登录"></li>
<li class="li5"><a class="forgot" href="javascript:">忘记密码?</a></li>
</ul>
</div>
</body>
</html>

toggle-password.js:

(function ($) {
$.fn.togglePassword = function( options ) {
var s = $.extend( $.fn.togglePassword.defaults, options ),
input = $( this ); $( s.el ).bind( s.ev, function() {
var flag = "password" == $( input ).attr( "type" )
//$(input).removeAttr("type");
//flag ? $( input ).attr( "type", "text" ) : $( input ).attr( "type", "password" );
flag ? $(input)[].type = "text" : $(input)[].type = "password";
});
};
$.fn.togglePassword.defaults = {
ev: "click"
};
}(jQuery));

  注意:input的type属性无法修改和移除,要修改其属性,需要这样:$(input)[0].type = "text"

  效果图:JS组件系列——显示隐藏密码切换的jQuery插件

  总结:1、修改type值得方式:$("input")[0].type = "text",这样修改才行

      2、 组件封装的思想:(1)函数立即执行:(function($){  //do something  }(jQuery));(2)声明定义默认的default对象;(3)$.extend(default, options);完成自定义参数和方法的拓展。

上一篇:[R] 繪圖 Par 函数


下一篇:寻找[nginx] 由Lua 粘合的Nginx生态环境-- agentzh