通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。
一、实例
普通的数字选择器。
代码
<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-upclass，向下按钮会另外带有一个ui-spinner-downclass。
四、快速导航
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的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持Devmax。