> MunberBox组件依赖于 ValidateBox(验证框)组件 # 加载方式 ## Class加载 ``` <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"> ``` ## JS调用加载 ``` <input id="box" /> <script> $(function () { $('#box').numberbox({ min : 0, precision : 2, }); }); </script> ``` # 属性列表 | 属性名 | 值 | 说明| | --- | --- | | disabled | boolean | 是否禁用该字段。默认值 false。| | value | number | 默认值。| | min | number | 允许的最小值。默认值 null。| | max | number | 允许的最大值。默认值 null。| | 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) | 用于解析字符串的函数。| *** ``` <input id="box" /> <script> $(function () { $('#box').numberbox({ required : true, min : 0, precision : 2, disabled : false, value : 123.45, max : 500, decimalSeparator : ':', groupSeparator : ',', prefix : '$', suffix : '€', filter : function (e) { return true; }, formatter : function (value) { return '123' + value; }, parser : function (s) { return s + 1; }, }); }); </script> ``` # 事件列表 | 事件名 | 事件属性 | 说明 | | --- | --- | | onChange | newvalue,oldValue | 当字段值更改的时候触发。 | *** ``` $('#box').numberbox({ onChange : function (newValue, oldValue) { alert(newValue + '|' + oldValue); }, }); ``` # 方法列表 | 方法名 | 传参 | 说明 | | --- | --- | | options | none | 返回数值输入框属性。| | destroy | none | 销毁数值输入框对象。| | disable | none | 禁用字段。| | enable | none | 启用字段。| | fix | none | 将输入框中的值修正为有效的值。| | setValue | value | 设置数值输入框的值。| | getValue | none | 获取数值输入框的值。| | clear | none | 清楚数值输入框的值。| | reset | none | 重置数值输入框的值。| *** ``` //返回属性对象 console.log($('#box').numberbox('options')); //销毁组件 $('#box').numberbox('destroy'); //禁用和启用 $('#box').numberbox('disable'); $('#box').numberbox('enable'); //修正为有效值 $(document).keyup(function () { $('#box').numberbox('fix'); }); //赋值 $(document).click(function () { $('#box').numberbox('setValue', 123); }); //取值 $(document).click(function () { console.log($('#box').numberbox('getValue')); });; //清空 $(document).click(function () { $('#box').numberbox('clear'); }); //重置 $(document).click(function () { $('#box').numberbox('reset'); }); //可以使用$.fn.numberbox.defaults 重写默认值对象 ```