第二十三章：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視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載