> 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 重寫默認值對象 ```