jQuery UI API - 旋轉器部件（Spinner Widget） · W3School jQuery UI 教程

# 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：對值減少一頁。用鼠標點擊旋轉按鈕后，焦點仍停留在文本域中。當旋轉器不是只讀（`<input readonly>`）時，用戶可以輸入值，這可能會產生無效的值（小于最小值，大于最大值，增減錯配，非數字輸入）。當增減時，不管通過編程方式還是旋轉按鈕方式，值都會被強制為一個有效值（如需了解詳情，請查看 [`stepUp()`](#method-stepUp) 和 [`stepDown()`](#method-stepDown) 的描述。 ### 主題化旋轉器部件（Spinner Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用旋轉器指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-spinner`：旋轉器的外層容器。 * `ui-spinner-input`：旋轉器部件（Spinner Widget）實例化的 `<input>` 元素。 * `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` 事件。 * 不支持在 `<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> ```