多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# jQuery UI API - 旋转器部件(Spinner Widget) ## 所属类别 [小部件(Widgets)](ref-widgets.html) ## 用法 **描述:**通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能。 **版本新增:**1.9 旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件。它允许用户直接输入一个值,或通过键盘、鼠标、滚轮旋转改变一个已有的值。当与全球化(Globalize)结合时,您甚至可以旋转显示不同地区的货币和日期。 旋转器(Spinner)使用两个按钮将文本输入覆盖为当前值的递增值和递减值。旋转器增加了按键事件,以便可以用键盘完成相同的递增和递减。旋转器代表 [全球化(Globalize)](https://github.com/jquery/globalize)的数字格式和解析。 ### 键盘交互 * UP:对值增加一步。 * DOWN:对值减少一步。 * PAGE UP:对值增加一页。 * PAGE DOWN:对值减少一页。 用鼠标点击旋转按钮后,焦点仍停留在文本域中。 当旋转器不是只读(`&lt;input readonly&gt;`)时,用户可以输入值,这可能会产生无效的值(小于最小值,大于最大值,增减错配,非数字输入)。当增减时,不管通过编程方式还是旋转按钮方式,值都会被强制为一个有效值(如需了解详情,请查看 [`stepUp()`](#method-stepUp) 和 [`stepDown()`](#method-stepDown) 的描述。 ### 主题化 旋转器部件(Spinner Widget)使用 [jQuery UI CSS 框架](api-css-framework.html) 来定义它的外观和感观的样式。如果需要使用旋转器指定的样式,则可以使用下面的 CSS class 名称: * `ui-spinner`:旋转器的外层容器。 * `ui-spinner-input`:旋转器部件(Spinner Widget)实例化的 `&lt;input&gt;` 元素。 * `ui-spinner-button`:用于递增或递减旋转器值的按钮控件。向上按钮会另外带有一个 `ui-spinner-up` class,向下按钮会另外带有一个 `ui-spinner-down` class。 ### 依赖 * [UI 核心(UI Core)](ref-ui-core.html) * [部件库(Widget Factory)](api-jQuery-widget.html) * [按钮部件(Button Widget)](api-button.html) * [全球化(Globalize)](https://github.com/jquery/globalize)(外部的,可选的;当与 [`culture`](#option-culture) 和 [`numberFormat`](#option-numberFormat) 选项一起使用时) ### 附加说明 * 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。 * 该部件以编程方式操作元素的值,因此当元素的值改变时不会触发原生的 `change` 事件。 * 不支持在 `&lt;input type="number"&gt;` 上创建选择器,因为会造成与本地旋转器的 UI 冲突。 ## 实例 普通的数字选择器。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>旋转器部件(Spinner Widget)演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <input id="spinner"> <script> $( "#spinner" ).spinner(); </script> </body> </html> ```