表单(下)-EasyUI Spinner 微调器EasyUI Numberspinner 数值微调器EasyUI Timespinner 时间微调器EasyUI Slider 滑块
Posted lewo的博客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单(下)-EasyUI Spinner 微调器EasyUI Numberspinner 数值微调器EasyUI Timespinner 时间微调器EasyUI Slider 滑块相关的知识,希望对你有一定的参考价值。
EasyUI Spinner 微调器
扩展自 $.fn.validatebox.defaults。通过 $.fn.spinner.defaults 重写默认的 defaults。
微调器(spinner)把可编辑的文本框和两个小按钮结合起来,允许用户从某个范围的值中进行选择。与组合框(combobox)相似,微调器(spinner)允许用户输入一个值,但是它买i有下拉列表。微调器(spinner)是创建其他微调器组件(比如:数值微调器 numberspinner、时间微调器 timespinner,等等)的基础组件。
依赖
- validatebox
用法
微调器(spinner)应该使用 javascript 进行创建。从标记创建是不允许的。
<input id="ss" value="2">
$(‘#ss‘).spinner({
required:true,
increment:10
});
属性
该属性扩展自验证框(validatebox),下面是为微调器(spinner)添加的属性。
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 |
spin | function(down) | 当用户点击微调按钮时调用的函数。‘down‘ 参数指示用户是否点击了向下微调按钮。 |
事件
名称 | 参数 | 描述 |
---|---|---|
onSpinUp | none | 当用户点击向上微调按钮时触发。 |
onSpinDown | none | 当用户点击向下微调按钮时触发。 |
方法
该方法扩展自验证框(validatebox),下面是为微调器(spinner)添加的方法。
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
destroy | none | 销毁微调器(spinner)组件。 |
resize | width | 重置组件的宽度。通过传递 ‘width‘ 参数来重写初始宽度。 代码实例:
|
enable | none | 启用组件。 |
disable | none | 禁用组件。 |
getValue | none | 获取组件的值。 |
setValue | value | 设置组件的值。 |
clear | none | 清除组件的值。 |
reset | none | 重置组件的值。该方法自版本 1.3.2 起可用。 |
EasyUI Numberspinner 数值微调器
扩展自 $.fn.spinner.defaults 和 $.fn.numberbox.defaults。通过 $.fn.numberspinner.defaults 重写默认的 defaults。
数值微调器(numberspinner)是基于微调器(spinner)和数字框(numberbox)创建的。它可以把输入值转换为不同类型(比如:数字 numeric、百分比 percentage、货币 currency,等等)。它允许用户使用向上/向下微调按钮滚动到一个期望值。
依赖
- spinner
- numberbox
用法
从标记创建数值微调器(numberspinner)。
<input id="ss" class="easyui-numberspinner" style="width:80px;" required="required" data-options="min:10,max:100,editable:false">
使用 javascript 创建数值微调器(numberspinner)。
<input id="ss" required="required" style="width:80px;">
$(‘#ss‘).numberspinner({
min: 10,
max: 100,
editable: false
});
创建数值微调器(numberspinner),并把数字格式化为货币字符串。
<input class="easyui-numberspinner" value="1234567890" style="width:150px;" data-options="required:true,precision:2,groupSeparator:‘,‘,decimalSeparator:‘.‘,prefix:‘$‘">
属性
该属性扩展自微调器(spinner)和数字框(numberbox)。
事件
该事件扩展自微调器(spinner)。
方法
该方法扩展自微调器(spinner),下面是为数值微调器(numberspinner)重写的方法。
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
setValue | value | 设置数值微调器(numberspinner)的值。 代码实例:
|
EasyUI Timespinner 时间微调器
扩展自 $.fn.spinner.defaults。通过 $.fn.timespinner.defaults 重写默认的 defaults。
时间微调器(timespinner)是基于微调器(spinner)创建的。它与数值微调器(numberspinner)相似,但是它只显示时间值。时间微调器(timespinner)允许用户通过点击组件右侧的小微调按钮来增加或减少时间。
依赖
- spinner
用法
从标记创建时间微调器(timespinner)。
<input id="ss" class="easyui-timespinner" style="width:80px;" required="required" data-options="min:‘08:30‘,showSeconds:true">
使用 javascript 创建时间微调器(timespinner)。
<input id="ss" style="width:80px;">
$(‘#ss‘).timespinner({
min: ‘08:30‘,
required: true,
showSeconds: true
});
属性
该属性扩展自微调器(spinner),下面是为时间微调器(timespinner)添加的属性。
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
separator | string | 时分秒之间的分隔符。 | : |
showSeconds | boolean | 定义是否显示秒的信息。 | false |
highlight | number | 初始高亮的域,0 = 时,1 = 分,... | 0 |
事件
该事件扩展自微调器(spinner)。
方法
该方法扩展自微调器(spinner),下面是为时间微调器(timespinner)重写的方法。
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
setValue | value | 设置时间微调器(timespinner)的值。 代码实例:
|
getHours | none | 获取当前的时钟的值。 |
getMinutes | none | 获取当前的分钟的值。 |
getSeconds | none | 获取当前的秒钟的值。 |
EasyUI Slider 滑块
通过 $.fn.slider.defaults 重写默认的 defaults。
滑块(slider)允许用户从一个有限的范围内选择一个数值。当沿着轨道移动滑块控件时,将显示一个表示当前值的提示框,用户可通过设置它的属性来自定义滑块。
依赖
- draggable
用法
当作为一个表单域使用时,从 <input> 标记创建滑块(slider)。
<input class="easyui-slider" value="12" style="width:300px" data-options="showTip:true,rule:[0,‘|‘,25,‘|‘,50,‘|‘,75,‘|‘,100]">
从 <div> 创建滑块(slider)也是允许的,但是 ‘value‘ 属性是无效的。
<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>
变成创建滑块(slider)。
<div id="ss" style="height:200px"></div>
$(‘#ss‘).slider({
mode: ‘v‘,
tipFormatter: function(value){
return value + ‘%‘;
}
});
属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 滑块(slider)的宽度。 | auto |
height | number | 滑块(slider)的高度。 | auto |
mode | string | 只是滑块(slider)的类型。可能的值:‘h‘(horizontal)、‘v‘(vertical)。 | h |
reversed | boolean | 当设置为 true 时,将会对调最小值和最大值的位置。该属性自版本 1.3.2 起可用。 | false |
showTip | boolean | 定义是否显示值信息提示框。 | false |
disabled | boolean | 定义是否禁用滑块(slider)。 | false |
value | number | 默认值。 | 0 |
min | number | 允许的最小值。 | 0 |
max | number | 允许的最大值。 | 100 |
step | number | 增加或减少的值。 | 1 |
rule | array | 在滑块旁边显示标签,‘|‘ — 值显示线。 | [] |
tipFormatter | function | 格式化滑块值的函数。返回作为提示框显示的字符串值。 |
事件
名称 | 参数 | 描述 |
---|---|---|
onChange | newValue,oldValue | 当文本域的值改变时触发。 |
onSlideStart | value | 当开始拖拽滑块时触发。 |
onSlideEnd | value | 当停止拖拽滑块时触发。 |
onComplete | value | 当滑块的值被用户改变时触发,无论是通过拖拽滑块改变还是通过点击滑块改变都会触发。该事件自版本 1.3.4 起可用。 |
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回滑块(slider)选项(options)。 |
destroy | none | 销毁滑块(slider)对象。 |
resize | param | 设置滑块尺寸。‘param‘ 参数包含下列属性: width:新的滑块宽度 height:新的滑块高度 |
getValue | none | 获取滑块(slider)的值。 |
setValue | value | 设置滑块(slider)的值。 |
clear | none | 清除滑块(slider)的值。该方法自版本 1.3.5 起可用。 |
reset | none | 重置滑块(slider)的值。该方法自版本 1.3.5 起可用。 |
enable | none | 启用滑块(slider)组件。 |
disable | none | 禁用滑块(slider)组件。 |
以上是关于表单(下)-EasyUI Spinner 微调器EasyUI Numberspinner 数值微调器EasyUI Timespinner 时间微调器EasyUI Slider 滑块的主要内容,如果未能解决你的问题,请参考以下文章
在 JavaFX Spinner 中手动输入文本不会更新值(除非用户按 ENTER)
第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件