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

一、實例

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

代碼

<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>

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

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

二、鍵盤交互

• UP：對值增加一步。
• DOWN：對值減少一步。
• PAGE UP：對值增加一頁。
• PAGE DOWN：對值減少一頁。

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

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

三、主題化

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

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

四、快速導航

1、Options

• culture：設(shè)置culture選項 用于解析和格式化值。 如果為null，在Globalize下當前設(shè)置的culture將被使用， 可供的culture，請查看Globalize 文檔。 只有當numberFormat選項設(shè)置了，才會有關(guān)聯(lián)。 需要引用Globalize。
• disabled：如果設(shè)置為 true，則禁用該 spinner（微調(diào)組件）。
• icons：標題要使用的圖標，與 jQuery UI CSS 框架提供的圖標（Icons） 匹配。設(shè)置為 false 則不顯示圖標。
• incremental：當按住spinner（微調(diào)組件）按鈕不放時，控制的步數(shù)。
• max：允許的最大值。 如果元素的max屬性存在，該選項未明確設(shè)置，那么該元素的max屬性就被用作該選項的值。 如果為null，表示沒有上限。
• min：允許的最小值。 如果元素的min屬性存在，該選項未明確設(shè)置，那么該元素的min屬性就被用作該選項的值。 如果為null，表示沒有下限。
• numberFormat：通過Globalize格式化數(shù)字， 如果有效的話。 最常見的用于"n"用作十進制數(shù) 和"C"用作貨幣值。 也看到了culture選擇。
• page：當通過pageUp/pageDown的方法進行分頁時，采取的步數(shù)。
• step：通過按鈕或stepUp()/stepDown()方法微調(diào)時，采取的步數(shù)。 如果元素的step屬性存在，并且該選項未明確設(shè)置，那么元素的step屬性值將作為該選項的值使用。

2、Methods

• destroy()：完全移除 spinner功能。這會把元素返回到它的預初始化狀態(tài)。
• disable()：禁用 spinner.
• enable()：啟用 spinner.
• option()：獲取當前與指定的 optionName 關(guān)聯(lián)的值。
• pageDown()：通過指定頁數(shù)遞減值， 頁數(shù)由page選項定義。 如果沒有參數(shù)， 單頁遞減。
• pageUp()：通過指定頁數(shù)遞增值， 頁數(shù)由page選項定義。 如果沒有參數(shù)， 單頁遞增。
• stepDown()：通過指定步數(shù)遞減值， 步數(shù)由step選項定義。 如果沒有參數(shù)， 單步遞減。
• stepUp()：通過指定步數(shù)遞增值， 步數(shù)由step選項定義。 如果沒有參數(shù)， 單步遞增。
• value()：獲取或設(shè)置當前數(shù)值，這個值是基于numberFormat 和 culture選項解析的。
• widget()：返回包含生成組件包裹元素 的一個jQuery對象。

3、Extension Points

• _buttonHtml()：這個方法返回的HTML用于spinner（微調(diào)組件）的遞增和遞減按鈕。 每個按鈕都必須給定一個ui-spinner-button的類名 用于相關(guān)聯(lián)的事件工作。
• _uiSpinnerHtml()：這個方法返回的HTML用于包裹 spinner（微調(diào)組件）元素。

4、Events

• change( event, ui )：當spinner微調(diào)器的值改變并且輸入元素（input）失去焦點時，該事件觸發(fā)。
• create( event, ui )：當spinner微調(diào)器創(chuàng)建的時候，該時間觸發(fā)。
• spin( event, ui )：在遞增/遞減的時候，該事件觸發(fā)（用 當前值和ui.value比較來 確定的微調(diào)的方向）?？梢匀∠苑乐贡桓轮?。
• start( event, ui )：微調(diào)開始之前，觸發(fā)該事件?？梢匀∠?，以防止微調(diào)。
• stop( event, ui )：微調(diào)結(jié)束后，觸發(fā)該事件。

到此這篇關(guān)于jQuery UI旋轉(zhuǎn)器部件Spinner Widget的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論