jQuery UI 教程教程
jQuery UI API – 旋转器部件（Spinner Widget）
jQuery UI API – 旋转器部件（Spinner Widget）
jQuery UI API - 旋转器部件（Spinner Widget）
所属类别
小部件（Widgets）
用法
描述：通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。
版本新增：1.9
旋转器（Spinner），或数步进控件（number stepper widget），是用于处理各种数字输入的完美控件。它允许用户直接输入一个值，或通过键盘、鼠标、滚轮旋转改变一个已有的值。当与全球化（Globalize）结合时，您甚至可以旋转显示不同地区的货币和日期。
旋转器（Spinner）使用两个按钮将文本输入覆盖为当前值的递增值和递减值。旋转器增加了按键事件，以便可以用键盘完成相同的递增和递减。旋转器代表 全球化（Globalize）的数字格式和解析。
键盘交互
- UP：对值增加一步。
- DOWN：对值减少一步。
- PAGE UP：对值增加一页。
- PAGE DOWN：对值减少一页。
用鼠标点击旋转按钮后，焦点仍停留在文本域中。
当旋转器不是只读（<input readonly>）时，用户可以输入值，这可能会产生无效的值（小于最小值，大于最大值，增减错配，非数字输入）。当增减时，不管通过编程方式还是旋转按钮方式，值都会被强制为一个有效值（如需了解详情，请查看 stepUp() 和 stepDown() 的描述。
主题化
旋转器部件（Spinner Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用旋转器指定的样式，则可以使用下面的 CSS class 名称：
ui-spinner：旋转器的外层容器。ui-spinner-input：旋转器部件（Spinner Widget）实例化的<input>元素。ui-spinner-button：用于递增或递减旋转器值的按钮控件。向上按钮会另外带有一个ui-spinner-upclass，向下按钮会另外带有一个ui-spinner-downclass。
依赖
- UI 核心（UI Core）
- 部件库（Widget Factory）
- 按钮部件（Button Widget）
- 全球化（Globalize）（外部的，可选的；当与
culture和numberFormat选项一起使用时）
附加说明
- 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
- 该部件以编程方式操作元素的值，因此当元素的值改变时不会触发原生的
change事件。 - 不支持在
<input type="number">上创建选择器，因为会造成与本地旋转器的 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>
| jQuery UI API – 旋转器部件（Spinner Widget） |
|---|
jQuery UI 教程
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题，可用于创建高度交互的 Web 应用程序。
加载中,请稍侯......