第二百一十八節，jQuery EasyUI，TimeSpinner(時間微調)組件

jQuery EasyUI，TimeSpinner(時間微調)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解 EasyUI 中 TimeSpinner(時間微調)組件的使用方法，這個組件依賴於 Spinner(微調)組件。

 

一．加載方式

class 加載方式

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

timespinner()將一個輸入框執行時間微調組件方法

JS 加載調用

$(function () {
    $('#box').timespinner({
        value: '00:00',
        min: '00:00',
        max: '23:59',
        editable: false,
    });
});

 

 

二．屬性列表

TimeSpinner 屬性，擴展自 Spinner(微調)組件，所以微調組件也是可以用的

separator   string 定義在小時、分鍾和秒之間的分隔符。默認值為‘：’。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        separator:'/'
    });
});

 

showSeconds   boolean 定義是否顯示秒鍾信息。默認值為 false。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        separator:'/',
        showSeconds:true
    });
});

 

highlight   number 初始選中的字段 0=小時,1=分鍾...默認值為0。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight:1,

    });
});

 

 

三．事件列表

TimeSpinner(時間微調)組件繼承自 Spinner(微調)組件。

事件列表

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight: 1,
        onSpinUp: function () {
            alert('點擊了上微調按鈕');
        },
        onSpinDown: function () {
            alert('點擊了下微調按鈕'); },
    });
});

 

四．方法列表

TimeSpinner 方法，擴展自 ValidateBox(驗證框)

options   none 返回屬性對象。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight: 1,
    });
    alert($('#box').timespinner('options'));
});

 

setValue   value 設置時間微調組件的值。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight: 1,
    });
    $('#box').timespinner('setValue','12:23:45');
});

 

getHours   none 獲取當前的小時數。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight: 1,
    });
    $(document).click(function () {
        alert($('#box').timespinner('getHours'));
        alert($('#box').timespinner('getMinutes'));
        alert($('#box').timespinner('getSeconds'));
    });
});

 

getMinutes   none 獲取當前的分鍾數。

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight: 1,
    });
    $(document).click(function () {
        alert($('#box').timespinner('getHours'));
        alert($('#box').timespinner('getMinutes'));
        alert($('#box').timespinner('getSeconds'));
    });
});

 

getSeconds   none 獲取當前的秒數。

 

$(function () {
    $('#box').timespinner({
        value: '00:00',     //初始時間
        min: '00:00',       //最小值
        max: '23:59',       //最大值
        highlight: 1,
    });
    $(document).click(function () {
        alert($('#box').timespinner('getHours'));
        alert($('#box').timespinner('getMinutes'));
        alert($('#box').timespinner('getSeconds'));
    });
});

 

 

 

我們可以使用$.fn.timespinner.defaults 重寫默認值對象。