第二十六章：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视频教程翻译成文档，转载请注明原文出处，欢迎转载