jQuery UI API – 旋轉器部件(Spinner Widget)
所屬類別
用法
描述:通過向上/向下按鈕和箭頭鍵處理,為輸入數值增強文本輸入功能。
版本新增: 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-up
class,向下按鈕會另外帶有一個ui-spinner-down
class。
-
依賴
- 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>