第二百一十七節，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 重寫默認值對象。