EasyUI中Numberbox的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Numberbox的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
用法
從標記創建數字框（numberbox）。
<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">使用 javascript 創建數字框（numberbox）。
<input type="text" id="nn">$('#nn').numberbox({min:0,precision:2});屬性
該屬性擴展自驗證框（validatebox），下面是為數字框（numberbox）添加的屬性。
| disabled | boolean | 定義是否禁用該字段。 | false |
| value | number | 默認值。 | ? |
| min | number | 允許的最小值。 | null |
| max | number | 允許的最大值。 | null |
| precision | number | 顯示在小數點后面的最大精度。 | 0 |
| decimalSeparator | string | 分隔數字的整數部分和小數部分的分隔字符。 | . |
| groupSeparator | string | 分隔整數組合的字符。 | ? |
| prefix | string | 前綴字符串。 | ? |
| suffix | string | 后綴字符串。 | ? |
| filter | function(e) | 定義如何過濾被按下的鍵，返回 true 則接受輸入字符。該屬性自版本 1.3.3 起可用。 | ? |
| formatter | function(value) | 用來格式數字框（numberbox）值的函數。返回顯示在框中的字符串值。 | ? |
| parser | function(s) | 用來解析字符串的函數。返回數字框（numberbox）值。 | ? |
事件
| onChange | newValue,oldValue | 當字段值改變時觸發。 |
方法
該方法擴展自驗證框（validatebox），下面是為數字框（numberbox）添加或重寫的方法。
| options | none | 返回選項（options）對象。 |
| destroy | none | 銷毀數字框（numberbox）對象。 |
| disable | none | 禁用該域。 |
| enable | none | 啟用該域。 |
| fix | none | 把值固定為有效的值。 |
| setValue | none | 設置數字框（numberbox）的值。 代碼實例： |
| getValue | none | 獲取數字框（numberbox）的值。 代碼實例： |
| clear | none | 清除數字框（numberbox）的值。 |
| reset | none | 重置數字框（numberbox）的值。該方法自版本 1.3.2 起可用。 |
實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"> </body> </html>?
總結
以上是生活随笔為你收集整理的EasyUI中Numberbox的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中Validatebox验证
- 下一篇： EasyUI中filebox文件选择框的