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

標籤：alert   ...   bool   時間   預設值   載入   second   ons   div   

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 重寫預設值對象。

 

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