jQuery显示隐藏密码插件jquery.toggle-password演示
资源内容介绍
jQuery显示隐藏密码插件jquery.toggle-password演示 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>jQuery显示隐藏密码插件jquery.toggle-password</title> <style> * { margin: 0; padding: 0; } body { font: 14px Arial, sans-serif; color: #333; } input { font-family: Arial, sans-serif; } .login { width: 270px; margin: 0 auto; padding: 30px 40px; background-color: #f7f7f7; } .login ul { list-style-type: none; } .login li { padding: 10px 0; overflow: hidden; } .login .li3, .login .li5 { text-align: right; font-size: 12px; } .login .li3 input { width: 13px; height: 13px; margin: 0 3px 0 10px; vertical-align: middle; } .login .submit { display: block; width: 100%; padding: 6px 0; border: 0 none; color: #fff; background-color: #4d90fe; cursor: pointer; } #email, #password { width: 214px; padding: 5px; border: 1px solid #ccc; } .forgot { color: #333; } </style> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery.toggle-password.js"></script> <link href="index.css" rel="stylesheet" type="text/css" /> <script> $(function () { $('#password').togglePassword({ el: '.image-eye' }); }); </script></head><body> <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery显示隐藏密码插件jquery.toggle-password演示</h1> <div class="login"> <ul> <li><span><label for="email">邮箱：</label></span><input id="email" type="text"></li> <li style=" position: relative"> <span><label for="password">密码：</label></span><input id="password" type="password"> <label class="image-eye image-eye-close"></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>