jQuery UI API - 旋轉(zhuǎn)器部件（Spinner Widget）

所屬類別

小部件（Widgets）

用法

描述：通過向上/向下按鈕和箭頭鍵處理，為輸入數(shù)值增強(qiáng)文本輸入功能。

版本新增：1.9

旋轉(zhuǎn)器（Spinner），或數(shù)步進(jìn)控件（number stepper widget），是用于處理各種數(shù)字輸入的完美控件。它允許用戶直接輸入一個(gè)值，或通過鍵盤、鼠標(biāo)、滾輪旋轉(zhuǎn)改變一個(gè)已有的值。當(dāng)與全球化（Globalize）結(jié)合時(shí)，您甚至可以旋轉(zhuǎn)顯示不同地區(qū)的貨幣和日期。

旋轉(zhuǎn)器（Spinner）使用兩個(gè)按鈕將文本輸入覆蓋為當(dāng)前值的遞增值和遞減值。旋轉(zhuǎn)器增加了按鍵事件，以便可以用鍵盤完成相同的遞增和遞減。旋轉(zhuǎn)器代表 全球化（Globalize）的數(shù)字格式和解析。

鍵盤交互

  • UP：對(duì)值增加一步。
  • DOWN：對(duì)值減少一步。
  • PAGE UP：對(duì)值增加一頁。
  • PAGE DOWN：對(duì)值減少一頁。

用鼠標(biāo)點(diǎn)擊旋轉(zhuǎn)按鈕后，焦點(diǎn)仍停留在文本域中。

當(dāng)旋轉(zhuǎn)器不是只讀（<input readonly>）時(shí)，用戶可以輸入值，這可能會(huì)產(chǎn)生無效的值（小于最小值，大于最大值，增減錯(cuò)配，非數(shù)字輸入）。當(dāng)增減時(shí)，不管通過編程方式還是旋轉(zhuǎn)按鈕方式，值都會(huì)被強(qiáng)制為一個(gè)有效值（如需了解詳情，請查看 stepUp() 和 stepDown() 的描述。

主題化

旋轉(zhuǎn)器部件（Spinner Widget）使用 jQuery UI CSS 框架 來定義它的外觀和感觀的樣式。如果需要使用旋轉(zhuǎn)器指定的樣式，則可以使用下面的 CSS class 名稱：

  • ui-spinner：旋轉(zhuǎn)器的外層容器。
    • ui-spinner-input：旋轉(zhuǎn)器部件（Spinner Widget）實(shí)例化的 <input> 元素。
    • ui-spinner-button：用于遞增或遞減旋轉(zhuǎn)器值的按鈕控件。向上按鈕會(huì)另外帶有一個(gè) ui-spinner-up class，向下按鈕會(huì)另外帶有一個(gè) ui-spinner-down class。

依賴

附加說明

  • 該部件要求一些功能性的 CSS，否則將無法工作。如果您創(chuàng)建了一個(gè)自定義的主題，請使用小部件指定的 CSS 文件作為起點(diǎn)。
  • 該部件以編程方式操作元素的值，因此當(dāng)元素的值改變時(shí)不會(huì)觸發(fā)原生的 change 事件。
  • 不支持在 <input type="number"> 上創(chuàng)建選擇器，因?yàn)闀?huì)造成與本地旋轉(zhuǎn)器的 UI 沖突。

實(shí)例

普通的數(shù)字選擇器。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>旋轉(zhuǎn)器部件（Spinner Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
</head>
<body>
 
<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>
 
</body>
</html>

查看演示