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-up class，向下按鈕會另外帶有一個 ui-spinner-down class。

依賴

附加說明

  • 該部件要求一些功能性的 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>