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

一、實(shí)例

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

代碼

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

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

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

二、鍵盤(pán)交互

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

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

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

三、主題化

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

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

四、快速導(dǎo)航

1、Options

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

2、Methods

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

3、Extension Points

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

4、Events

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

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

最新評(píng)論