EasyUI jQuery passwordBox widget
EasyUI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能,为开发者节省大量时间。
在这篇文章中,我们将学习如何使用jQuery EasyUI设计一个密码箱。密码箱允许用户输入密码。密码箱通过显示点来保护你的密码,而不是密码文本。当你想检查你的密码时,只需点击眼睛按钮即可
EasyUI for jQuery的下载:
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-passwordbox">
属性:
- passwordChar。要在文本框上显示的密码字符。
- checkInterval。检查的间隔时间。
- lastDelay:将最后输入的字符转换为密码字符的延迟时间。
- revealed。定义是否揭示隐藏的密码。
- showEye。定义是否显示眼睛图标。
方法:
- options。返回选项对象。
- showPassword:显示真实的密码。
- hidePassword: 隐藏真实密码。
CDN链接:首先,添加你的项目需要的jQuery Easy UI脚本,链接是本地路径。
<script type=”text/javascript” src=”jquery.min.js”> </script> <!–jQuery libraries of EasyUI –> <script type=”text/javascript” src=”jquery.easyui.min.js”> </script> <!–jQuery library of EasyUI Mobile –> <script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
示例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg').passwordbox({
showEye: false
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery passwordbox widget</h3>
<p>Password :
<input id="gfg" class="easyui-passwordbox">
</p>
</body>
</html>
输出: