第二十六章：Spinner（微調）組件
學習要點：
- 加載方式
- 屬性列表
- 事件列表
- 方法列表
一、加載方式：
Spinner（微調）組件是其他兩款高級微調組件的基礎組件，默認情況下無法微調，這個組件不支持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 id="box" value="2">
</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>
<input id="box">
</body>
</html>
$(function(){
$.('#box').spinner({
required:ture,
});
});
二、屬性列表：
| Spinner屬性， 擴展自ValidateBox（ 驗證框）組件 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| width | number | 組件寬度。默認值auto。 |
| height | number | 組件高度。默認值22。 |
| value | string | 默認值 |
| min | string | 允許的最小值。默認值null。 |
| max | string | 允許的最大值。默認值null。 |
| increment | number | 在點擊微調按鈕的時候的增量值。默認值1。 |
| editable | boolean | 定義用戶是否可以直接輸入值到字段。默認值true。 |
| disable | boolean | 定義用戶是否禁用該字段。默認值false。 |
| spin | function(down) | 在用戶點擊微調按鈕的時候調用的函數。‘down’參數對應用戶點擊的向下按鈕。 |
<!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 id="box">
</body>
</html>
$(function(){
$.('#box').spinner({
required:ture,
//width:300,
//height:40,
value:2,
min:1,
max:500,
increment:1,
editable:false,
spin:function(down){
alert(down);
}
});
});
三、事件列表：
| Spinner事件 | ||
|---|---|---|
| 事件名 | 事件屬性 | 說明 |
| onSpinUp | none | 在用戶點擊 向上微調按鈕的時候觸發。 |
| onSpinDown | none | 在用戶點擊向下微調按鈕的時候觸發。 |
<!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 id="box">
</body>
</html>
$(function(){
$.('#box').spinner({
onSpinUp:function(){
$.('#box').spinner('setValue',parseInt($('#box').spinner('getValue'))+1);
},
onSpinDown:function(){
$.('#box').spinner('setValue',parseInt($('#box').spinner('getValue'))-1);
},
});
});
四、方法列表：
| Spinner方法，擴展自ValiDateBox（驗證框） | ||
|---|---|---|
| 方法名 | 傳參 | 說明 |
| options | none | 返回屬性對象。 |
| destroy | none | 銷燬微調組件。 |
| resize | width | 返回組件寬度。通過‘width’參數重寫原始寬度。 |
| enable | none | 啓用組件 |
| disable | none | 禁用組件 |
| getValue | none | 獲取組件值 |
| setValue | value | 設置組件值 |
| clear | none | 清空組件值 |
| reset | none | 重置組件值 |
<!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 id="box">
</body>
</html>
$(function(){
$.('#box').spinner({
//返回屬性對象
console.log($('#box').spinner('options'));
//銷燬組件
$('#box').spinner('destroy');
//調整到新寬度，第二參數不填，則調整到初始寬度
$('#box').spinner('resize',200);
//禁用啓用
$('#box').spinner('disable');
$('#box').spinner('unable');
//賦值取值
$('#box').spinner('setValue',200);
$('#box').spinner('getValue');
//賦值取值
$('#box').spinner('clear');
$('#box').spinner('reset');
});
});
PS：我們可以使用$.fn.spinner.defaults重寫默認值對象。
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/102957426
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載