极客教程EasyUI jQuery numberbox Widget
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个数字框。数字框允许用户在一个盒子里添加数字值。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-numberbox">
属性:
- disabled:定义是否禁用该字段。
- value。默认值。
- min: 允许的最小值。
- max:允许的最大值。
- precision。在小数点分隔符后显示的最大精度。
- decimalSeparator:小数点字符用于分隔数字的整数和小数部分。.
- groupSeparator。分隔整数组的字符，用于显示千和百万。
- prefix。前缀字符串。
- suffix。后缀字符串。
- filter。定义如何过滤按下的键。
- formatter。一个用于格式化数字框值的函数。
- parser。一个用于解析字符串的函数。
方法:
- options。返回数字框的选项。
- destroy。销毁数字框对象。
- disable:禁用该字段。
- Enable。启用该字段。
- fix。将该值修复为有效值。
- setValue。设置数字框的值。
- getValue。获取数字框的值。
- clear: 清除数字框的值。
- reset。重置数字框值。
事件:
- onChange。当字段的值发生变化时启动。
方法：首先，添加你的项目需要的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>
<h1>GeeksforGeeks</h1>
<h3>how to make a basic numberbox using jQuery UI?</h3>
</head>
<body>
<input class="easyui-numberbox"
value="123" label="Number:" >
</body>
</html>
输出:
