通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。

一、实例

普通的数字选择器。

jQuery UI （17）旋转器部件（Spinner Widget）_jquery


代码


<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。