Spinner(微调)
扩展自$.fn.validatebox.defaults。使用$.fn.spinner.defaults重写默认值对象。
微调控件结合了一个可编辑文本框和2个小按钮让用户选择一个值的范围。和下拉列表框类似,微调控件允许用户输入值,但是没有下拉列表。微调控件是创建其他高级微调控件的基础控件,比如:numberspinner, timespinner等。
依赖关系
使用案例
只能使用Javascript创建微调控件。标签创建是无效的。
- <input id="ss" value="2">
- $('#ss').spinner({
- required:true,
- increment:10
- });
属性
微调控件的属性扩展自validatebox(验证框),微调控件新增或重写的属性如下:
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 组件宽度。 | auto |
height | number | 组件高度。(该属性自1.3.2版开始可用) | 22 |
value | string | 默认值。 | |
min | string | 允许的最小值。 | null |
max | string | 允许的最大值。 | null |
increment | number | 在点击微调按钮的时候的增量值。 | 1 |
editable | boolean | 定义用户是否可以直接输入值到字段。 | true |
disabled | boolean | 定义是否禁用字段。 | false |
readonly | boolean | 定义控件是否为只读。(该属性自1.3.6版开始可用) | false |
spinAlign | string | 定义控件的对齐方式。可用值:'left','right','horizontal','vertical'(该属性自1.5版开始可用) | right |
spin | function(down) | 在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮。 |
事件
事件名 | 事件参数 | 描述 |
---|---|---|
onSpinUp | none | 在用户点击向上微调按钮的时候触发。 |
onSpinDown | none | 在用户点击向下微调按钮的时候触发。 |
方法
微调控件的方法扩展自validatebox(验证框),微调控件新增的方法如下:
方法名 | 方法参数 | 描述 |
---|---|---|
options | none | 返回属性对象。 |
destroy | none | 销毁微调组件。 |
resize | width | 返回组件宽度。通过'width'参数重写原始宽度。
代码示例: $('#ss').spinner('resize'); // 调整到原始宽度 |
enable | none | 启用组件。 |
disable | none | 禁用组件。 |
getValue | none | 获取组件值。 |
setValue | value | 设置组件值。 |
readonly | mode |
启用/禁用只读模式。(该方法自1.3.6版开始可用) 代码示例: $('#ss').spinner('readonly'); // 启用只读模式 $('#ss').spinner('readonly', true); // 启用只读模式 $('#ss').spinner('readonly', false); // 禁用只读模式 |
clear | none | 清空组件值。 |
reset | none | 重置组件值。(该方法自1.3.2版开始可用) |