jQuery EasyUI，Spinner(微调)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法，这个组件依赖于 ValidateBox(验证框)组件。
这个组件是其他微调组件的基础组件，所以一般不会直接使用这个组件
一．加载方式
Spinner(微调)组件是其他两款高级微调组件的基础组件，默认情况下无法微调。这个 组件不支持 class 加载方式。
html
<input id="box" value="2">
JS 加载调用
spinner()将一个元素执行微调组件
$(function () {
$('#box').spinner({
required: true,
});
});
二．属性列表
width number 组件宽度。默认值 auto。
$(function () {
$('#box').spinner({
width: 200,
height:30
});
});
height number 组件高度。默认值22。
$(function () {
$('#box').spinner({
width: 200,
height:30
});
});
value string 默认值。
$(function () {
$('#box').spinner({
width: 200,
height:30,
value:5
});
});
min string 允许的最小值。默认值 null。单独使用没有效果
$(function () {
$('#box').spinner({
width: 200,
height:30,
min:5,
max:50
});
});
max string 允许的最大值。默认值 null。单独使用没有效果
$(function () {
$('#box').spinner({
width: 200,
height:30,
min:5,
max:50
});
});
increment number 在点击微调按钮的时候的增量值。默认值1。单独使用没有效果
$(function () {
$('#box').spinner({
width: 200,
height:30,
increment:5 //在点击微调按钮的时候的增量值。默认值1
});
});
editable boolean 定义用户是否可以直接输入值到字段。默认值 true。
$(function () {
$('#box').spinner({
width: 200,
height:30,
editable:false
});
});
disabled boolean 定义是否禁用字段。默认值 false。
$(function () {
$('#box').spinner({
width: 200,
height:30,
disabled:true
});
});
spin function(down) 在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮。可以判断用户点击微调的上按钮还是下按钮，点击下按钮返回true，点击上按钮返回false
$(function () {
$('#box').spinner({
width: 200,
height:30,
spin:function (down) {
alert(down);
}
});
});
三．事件列表
onSpinUp none 在用户点击向上微调按钮的时候触发。
$(function () {
$('#box').spinner({
width: 200,
height: 30,
onSpinUp: function () { //在用户点击向上微调按钮的时候触发
//当用户点击上按钮时，获取到输入框的值加1，在赋值给输入框
$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) + 1);
},
onSpinDown: function () { //在用户点击向下微调按钮的时候触发
//当用户点击下按钮时，获取到输入框的值减1，在赋值给输入框
$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) - 1);
},
});
});
onSpinDown none 在用户点击向下微调按钮的时候触发。
$(function () {
$('#box').spinner({
width: 200,
height: 30,
onSpinUp: function () { //在用户点击向上微调按钮的时候触发
//当用户点击上按钮时，获取到输入框的值加1，在赋值给输入框
$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) + 1);
},
onSpinDown: function () { //在用户点击向下微调按钮的时候触发
//当用户点击下按钮时，获取到输入框的值减1，在赋值给输入框
$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) - 1);
},
});
});
四．方法列表
options none 返回属性对象。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
alert($('#box').spinner('options'));
});
destroy none 销毁微调组件。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('destroy');
});
resize width 返回组件宽度。通过'width'参数重写原始宽度。重写或者重置组件
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('resize',100); //重写宽度
});
enable none 启用组件。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('disable');
$('#box').spinner('enable');
});
disable none 禁用组件。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('disable');
$('#box').spinner('enable');
});
getValue none 获取组件值。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
alert($('#box').spinner('getValue')); //获取组件值
});
setValue value 设置组件值。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('setValue',500);
});
clear none 清空组件值。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('clear');
});
reset none 重置组件值。
$(function () {
$('#box').spinner({
width: 200,
height: 30
});
$('#box').spinner('reset');
});
我们可以使用$.fn.spinner.defaults 重写默认值对象。