jQuery UI旋转器部件Spinner Widget
通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能。
一、实例
普通的数字选择器。
代码
<input id="spinner"> <script> $( "#spinner" ).spinner(); </script>
旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件。它允许用户直接输入一个值,或通过键盘、鼠标、滚轮旋转改变一个已有的值。当与全球化(Globalize)结合时,您甚至可以旋转显示不同地区的货币和日期。
旋转器(Spinner)使用两个按钮将文本输入覆盖为当前值的递增值和递减值。旋转器增加了按键事件,以便可以用键盘完成相同的递增和递减。旋转器代表 全球化(Globalize)的数字格式和解析。
二、键盘交互
- UP:对值增加一步。
- DOWN:对值减少一步。
- PAGE UP:对值增加一页。
- PAGE DOWN:对值减少一页。
用鼠标点击旋转按钮后,焦点仍停留在文本域中。
当旋转器不是只读()时,用户可以输入值,这可能会产生无效的值(小于最小值,大于最大值,增减错配,非数字输入)。当增减时,不管通过编程方式还是旋转按钮方式,值都会被强制为一个有效值(如需了解详情,请查看 stepUp()
和 stepDown()
的描述。
三、主题化
旋转器部件(Spinner Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用旋转器指定的样式,则可以使用下面的 CSS class 名称:
ui-spinner
:旋转器的外层容器。ui-spinner-input
:旋转器部件(Spinner Widget)实例化的 元素。ui-spinner-button
:用于递增或递减旋转器值的按钮控件。向上按钮会另外带有一个ui-spinner-up
class,向下按钮会另外带有一个ui-spinner-down
class。
四、快速导航
1、Options
- culture:设置
culture
选项 用于解析和格式化值。 如果为null
,在Globalize
下当前设置的culture将被使用, 可供的culture
,请查看Globalize 文档。 只有当numberFormat
选项设置了,才会有关联。 需要引用Globalize。 - disabled:如果设置为
true
,则禁用该 spinner(微调组件)。 - icons:标题要使用的图标,与 jQuery UI CSS 框架提供的图标(Icons) 匹配。设置为 false 则不显示图标。
- incremental:当按住spinner(微调组件)按钮不放时,控制的步数。
- max:允许的最大值。 如果元素的
max
属性存在,该选项未明确设置,那么该元素的max
属性就被用作该选项的值。 如果为null
,表示没有上限。 - min:允许的最小值。 如果元素的
min
属性存在,该选项未明确设置,那么该元素的min
属性就被用作该选项的值。 如果为null
,表示没有下限。 - numberFormat:通过
Globalize
格式化数字, 如果有效的话。 最常见的用于"n"
用作十进制数 和"C"
用作货币值。 也看到了culture
选择。 - page:当通过
pageUp
/pageDown
的方法进行分页时,采取的步数。 - step:通过按钮或
stepUp()
/stepDown()
方法微调时,采取的步数。 如果元素的step
属性存在,并且该选项未明确设置,那么元素的step
属性值将作为该选项的值使用。
2、Methods
- destroy():完全移除 spinner功能。这会把元素返回到它的预初始化状态。
- disable():禁用 spinner.
- enable():启用 spinner.
- option():获取当前与指定的
optionName
关联的值。 - pageDown():通过指定页数递减值, 页数由
page
选项定义。 如果没有参数, 单页递减。 - pageUp():通过指定页数递增值, 页数由
page
选项定义。 如果没有参数, 单页递增。 - stepDown():通过指定步数递减值, 步数由
step
选项定义。 如果没有参数, 单步递减。 - stepUp():通过指定步数递增值, 步数由
step
选项定义。 如果没有参数, 单步递增。 - value():获取或设置当前数值,这个值是基于
numberFormat
和culture
选项解析的。 - widget():返回包含生成组件包裹元素 的一个
jQuery
对象。
3、Extension Points
- _buttonHtml():这个方法返回的HTML用于spinner(微调组件)的递增和递减按钮。 每个按钮都必须给定一个
ui-spinner-button
的类名 用于相关联的事件工作。 - _uiSpinnerHtml():这个方法返回的HTML用于包裹 spinner(微调组件)元素。
4、Events
- change( event, ui ):当spinner微调器的值改变并且输入元素(input)失去焦点时,该事件触发。
- create( event, ui ):当spinner微调器创建的时候,该时间触发。
- spin( event, ui ):在递增/递减的时候,该事件触发(用 当前值和
ui.value
比较来 确定的微调的方向)。可以取消,以防止被更新值。 - start( event, ui ):微调开始之前,触发该事件。可以取消,以防止微调。
- stop( event, ui ):微调结束后,触发该事件。
到此这篇关于jQuery UI旋转器部件Spinner Widget的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)