第二十三章：NumberBox（数值输入框）组件
学习要点：
- 加载方式
- 属性列表
- 方法列表
- 方法列表
一、加载方式：
1.class加载方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input type="text" id="box" class="easyui-numberbox">
</body>
</html>
2.JS调用加载：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<inpu id="box"">
</body>
</html>
$(function(){
$('#box').numberbox({
value:500,
});
});
二、属性列表：
| NumberBox属性，扩展自ValidateBox属性 | ||
|---|---|---|
| 属性名 | 值 | 说明 |
| disabled | boolean | 是否禁用该字段。默认值false。 |
| value | number | 默认值 |
| min | number | 最小值 |
| max | number | 最大值 |
| precision | number | 在十进制分隔符之后显示的最大精度。（即小数点后的显示精度）默认值0 |
| decimalSeparator | string | 使用哪一种十进制字符分隔数字的整数和小数部分。默认值为小数点。 |
| groupSeparator | string | 使用哪一种字符分隔整数组，以显示成千上万的数据。（比如：99,999,999.00中的‘，’就是该分隔符设置）。 |
| prefix | string | 前缀字符。（比如：金额的$或者￥） |
| suffix | string | 后缀字符。（比如：后置的欧元符号€） |
| filter | function（e） | 定义如何过滤按键，当返回true时则允许输入，反之禁止。 |
| formatter | function（v） | 用于格式化数组的函数。返回字符串值以显示到输入框中。 |
| parser | function（s） | 用于解析字符串的函数。 |
三、事件列表：
| NumberBox事件 | ||
|---|---|---|
| 事件名 | 事件属性 | 说明 |
| onChange | newValue,oldValue | 当字段值更改的时候触发。 |
四、方法列表：
| NumberBox方法，扩展自ValidateBox(验证框) | ||
|---|---|---|
| 方法名 | 传参数 | 说明 |
| options | none | 返回数值输入框属性 |
| destroy | none | 销毁数值输入框对象 |
| disable | none | 禁用字段 |
| enable | none | 启用字段 |
| fix | none | 将输入框职中的值修正为有效的值。 |
| setValue | value | 设置数值输入框的值 |
| getValue | none | 获取数值输入框的值 |
| clear | none | 清除数值输入框的值 |
| reset | none | 重置数值输入框的值 |
PS：我们可以使用$.fn.numberbox.defaults 重写默认值对象。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<inpu id="box"">
</body>
</html>
$(function(){
$('#box').numberbox({
//value:500,
//min:5,
//max:500,
precision:2,
//decimalSeparator:':',
//groupSeparator:',',
//prefix:'$',
//suffix:'€',
/*
filter:function(){
return:true,
},
formater:function(value){
return:'111,'+ value;
},
parser:function(s):{
return:'111,'+ s;
},
onChange:function(newValue,oldValue){
alert(newValue + '|' + oldValue);
},
*/
});
$(document).click(function(){
//$('#box').numberbox('fix');
//console.log($('#box').numberbox('getValue'));
$('#box').numberbox('setValue',666);
});
});
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/103007189
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载