第二百一十七节，jQuery EasyUI，NumberSpinner(数字微调)组件

jQuery EasyUI，NumberSpinner(数字微调)组件

 

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

 

本节课重点了解 EasyUI 中 NumberSpinner(数字微调)组件的使用方法，这个组件依赖于 Numberbox(数值输入框)和 Spinner(微调)组件。

 

一．加载方式

class 加载方式

<input id="box" class="easyui-numberspinner">

numberspinner()将一个输入框执行数字微调组件方法

JS 加载调用

$(function () {
    $('#box').numberspinner({
        value: 10,
        increment: 10,
        min: 10,
        max: 500,
    });
});

 

 

二．属性列表

注意：数字微调组件，属性，方法，事件继承微调组件的属性，和验证框组件的属性，关于验证方面的参照验证框属性，关于微调的参照微调属性

$(function () {
    $('#box').numberspinner({
        required: true,     //继承验证框组件的，不能为空
        width: 200,         //继承微调组件的，宽度
        height: 30,         //继承微调组件的，高度
        value: 2,           //继承微调组件的，设置值
        min: 1,             //继承微调组件的，最小值
        max: 500,           //继承微调组件的，最大值
        increment: 1,       //继承微调组件的，增量
        spin: function (down) {     //继承微调组件的，点击微调按钮事件
            alert(down);
        },
    });
});

 

 

三．事件列表

NumberSpinner(数字微调)组件继承自 Spinner(微调)组件。

$(function () {
    $('#box').numberspinner({
        required: true,     //继承验证框组件的，不能为空
        width: 200,         //继承微调组件的，宽度
        height: 30,         //继承微调组件的，高度
        value: 2,           //继承微调组件的，设置值
        min: 1,             //继承微调组件的，最小值
        max: 500,           //继承微调组件的，最大值
        increment: 1,       //继承微调组件的，增量
        onSpinUp: function () {
            alert('点击了上微调按钮');
        },
        onSpinDown: function () {
            alert('点击了下微调按钮');
        },
    });
});

 

 

四．方法列表

NumberSpinner(数字微调)组件继承自 Spinner(微调)组件方法

如：取值赋值

$(function () {
    $('#box').numberspinner({
        required: true,     //继承验证框组件的，不能为空
        width: 200,         //继承微调组件的，宽度
        height: 30,         //继承微调组件的，高度
        value: 2,           //继承微调组件的，设置值
        min: 1,             //继承微调组件的，最小值
        max: 500,           //继承微调组件的，最大值
        increment: 1,       //继承微调组件的，增量
    });
    $('#box').numberspinner('setValue', 100);
    alert($('#box').numberspinner('getValue'));
});

 

 

我们可以使用$.fn.numberspinner.defaults 重写默认值对象。