表单(下)-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‘ 参数来重写初始宽度。
代码实例:
  1. $(‘#ss‘).spinner(‘resize‘); // resize with original width
  2. $(‘#ss‘).spinner(‘resize‘, 200); // resize with new 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)的值。
代码实例:
  1. $(‘#ss‘).numberspinner(‘setValue‘, 8234725); // set value
  2. var v = $(‘#ss‘).numberspinner(‘getValue‘); // get value
  3. alert(v)

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)的值。
代码实例:
  1. $(‘#ss‘).timespinner(‘setValue‘, ‘17:45‘); // set timespinner value
  2. var v = $(‘#ss‘).timespinner(‘getValue‘); // get timespinner value
  3. alert(v);
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 滑块的主要内容,如果未能解决你的问题,请参考以下文章

Rails、Turbolinks 和微调器

在 JavaFX Spinner 中手动输入文本不会更新值(除非用户按 ENTER)

微调器显示数据库中的数据

第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件

多个 Bootstrap touchspin 或 bootstrap-input-spinner

获取微调器选定项目文本?