jQuery?UI旋轉器部件Spinner?Widget怎么使用

這篇文章主要介紹“jQuery UI旋轉器部件Spinner Widget怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“jQuery UI旋轉器部件Spinner Widget怎么使用”文章能幫助大家解決問題。

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

一、實例

普通的數字選擇器。

代碼

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

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

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

二、鍵盤交互

• UP：對值增加一步。

• DOWN：對值減少一步。

• PAGE UP：對值增加一頁。

• PAGE DOWN：對值減少一頁。

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

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

三、主題化

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

• ui-spinner：旋轉器的外層容器。

• ui-spinner-input：旋轉器部件（Spinner Widget）實例化的  元素。

• ui-spinner-button：用于遞增或遞減旋轉器值的按鈕控件。向上按鈕會另外帶有一個 ui-spinner-up class，向下按鈕會另外帶有一個 ui-spinner-downclass。

四、快速導航

1、Options

• culture：設置culture選項 用于解析和格式化值。 如果為null，在Globalize下當前設置的culture將被使用， 可供的culture，請查看Globalize 文檔。 只有當numberFormat選項設置了，才會有關聯。 需要引用Globalize。

• disabled：如果設置為 true，則禁用該 spinner（微調組件）。

• icons：標題要使用的圖標，與 jQuery UI CSS 框架提供的圖標（Icons） 匹配。設置為 false 則不顯示圖標。

• incremental：當按住spinner（微調組件）按鈕不放時，控制的步數。

• max：允許的最大值。 如果元素的max屬性存在，該選項未明確設置，那么該元素的max屬性就被用作該選項的值。 如果為null，表示沒有上限。

• min：允許的最小值。 如果元素的min屬性存在，該選項未明確設置，那么該元素的min屬性就被用作該選項的值。 如果為null，表示沒有下限。

• numberFormat：通過Globalize格式化數字， 如果有效的話。 最常見的用于"n"用作十進制數 和"C"用作貨幣值。 也看到了culture選擇。

• page：當通過pageUp/pageDown的方法進行分頁時，采取的步數。

• step：通過按鈕或stepUp()/stepDown()方法微調時，采取的步數。 如果元素的step屬性存在，并且該選項未明確設置，那么元素的step屬性值將作為該選項的值使用。

2、Methods

• destroy()：完全移除 spinner功能。這會把元素返回到它的預初始化狀態。

• disable()：禁用 spinner.

• enable()：啟用 spinner.

• option()：獲取當前與指定的 optionName 關聯的值。

• pageDown()：通過指定頁數遞減值， 頁數由page選項定義。 如果沒有參數， 單頁遞減。

• pageUp()：通過指定頁數遞增值， 頁數由page選項定義。 如果沒有參數， 單頁遞增。

• stepDown()：通過指定步數遞減值， 步數由step選項定義。 如果沒有參數， 單步遞減。

• stepUp()：通過指定步數遞增值， 步數由step選項定義。 如果沒有參數， 單步遞增。

• value()：獲取或設置當前數值，這個值是基于numberFormat 和 culture選項解析的。

• widget()：返回包含生成組件包裹元素 的一個jQuery對象。

3、Extension Points

• _buttonHtml()：這個方法返回的HTML用于spinner（微調組件）的遞增和遞減按鈕。 每個按鈕都必須給定一個ui-spinner-button的類名 用于相關聯的事件工作。

• _uiSpinnerHtml()：這個方法返回的HTML用于包裹 spinner（微調組件）元素。

4、Events

• change( event, ui )：當spinner微調器的值改變并且輸入元素（input）失去焦點時，該事件觸發。

• create( event, ui )：當spinner微調器創建的時候，該時間觸發。

• spin( event, ui )：在遞增/遞減的時候，該事件觸發（用 當前值和ui.value比較來 確定的微調的方向）。可以取消，以防止被更新值。

• start( event, ui )：微調開始之前，觸發該事件。可以取消，以防止微調。

• stop( event, ui )：微調結束后，觸發該事件。

關于“jQuery UI旋轉器部件Spinner Widget怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。