2.3　微調器簡介

2.3.1　微調器（Spinner）

微調器由一個可編輯的文本框和兩個微調按鈕組成（下面稱其為增量按鈕和減量按鈕），允許用戶在一定范圍內選擇數據。與組合框一樣，微調器也允許用戶在文本框內輸入值，但是它沒有下拉面板。微調器是創建其他微調器組件（比如：數字微調（NumberSpinner）、時間微調器（TimeSpinner））的基礎組件。

微調器的依賴關系如下：

• textbox

微調器擴展于：

• textbox

微調器的默認配置定義在$.fn.spinner.defaults中。

1. 創建微調器

只可以通過JavaScript創建微調器，使用標記創建是不合法的。

01  <input id="ss" value="2">
02  $('#ss').spinner({
03      required:true,
04      increment:10
05  });

2. 微調器屬性

微調器常用屬性說明見表2.17。

表2.17　微調器的常用屬性

3. 微調器事件

微調器常用事件的說明見表2.18。

表2.18　微調器的常用事件

4. 微調器方法

微調器常用方法的說明見表2.19。

表2.19　微調器的常用方法

2.3.2　數字微調器（NumberSpinner）

數字微調器由數字框和微調器組成，可以將用戶輸入的數據轉換成不同的展示格式，例如數字、百分比、貨幣等。它允許用戶使用向上／向下微調按鈕滾動到一個期望值。數字微調器的使用與數字框一樣，不同的是開發者可以通過增量按鈕或減量按鈕來限制每次數值的變化量。

數字微調器的依賴關系如下：

• spinner
• numberbox

數字微調器擴展于：

• spinner

數字微調器的默認配置定義在$.fn.numberspinner.defaults中。

1. 創建數字微調器

使用標記創建數字微調器的方法如下：

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

使用JavaScript創建數字微調器的方法如下：

01      $('#ss').numberspinner({
02          min: 10,
03          max: 100,
04          editable: false
05  });

2. 數字微調器屬性

數字微調器本身無重寫／新增屬性。

3. 數字微調器事件

數字微調器本身無重寫／新增事件。

4. 數字微調器方法

數字微調器常用方法說明見表2.20。

表2.20　數字微調器的常用方法

2.3.3　時間微調器（TimeSpinner）

時間微調器是基于微調器的一個組件，與數字微調器一樣。不過時間微調器可以用來顯示時間，用戶可以通過單擊時間微調器右側的增量或者減量按鈕來調整時間。

時間微調器的依賴關系如下：

• spinner

時間微調器擴展于：

• spinner

時間微調器的默認配置定義在$.fn.timespinner.defaults中。

1. 創建時間微調器

使用標記創建時間微調器的方法如下：

<input id="ss" class="easyui-timespinner"  style="width:80px;"
        required="required" data-options="min:'06:30',showSeconds:true">

使用JavaScript創建時間微調器的方法如下：

01  <input id="ss" style="width:80px;">
02      $('#ss').timespinner({
03          min: '06:30',
04          required: true,
05          showSeconds: true
06  });

2. 時間微調器的屬性

時間微調器常用屬性說明見表2.21。

表2.21　時間微調器的常用屬性

3. 時間微調器的事件

時間微調器無重寫／新增事件。

4. 時間微調器的方法

時間微調器常用方法說明見表2.22。

表2.22　時間微調器的常用方法

2.3.4　日期微調器（DateTimeSpinner）

日期微調器由時間微調器擴展而來，不僅可以微調時間還可以微調日期。

日期微調器的依賴關系如下：

• timespinner

日期微調器擴展于：

• timespinner

日期微調器的默認配置定義在$.fn.datetimespinner.defaults中。

1. 創建日期微調器

使用標記創建日期微調器的方法如下：

<input class="easyui-datetimespinner" style="width:300px">

使用JavaScript創建創建日期微調器的方法如下：

01  <input id="dt" type="text" style="width:300px">
02  $('#dt').datetimespinner({
03      //...
04  })

2. 日期微調器屬性

日期微調器重寫了時間微調器的selections屬性，可以通過為其設置一個數組值來調整日期微調器的高亮部分，例如：[[0,2],[3,5],[6,10],[11,13],[14,16],[17,19]]。

3. 日期微調器事件

日期微調器無重寫／新增事件。

4. 日期微調器方法

日期微調器無重寫／新增方法。