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. 日期微调器方法

日期微调器无重写／新增方法。