您好,登錄后才能下訂單哦!
這篇文章主要介紹“jQuery UI旋轉(zhuǎn)器部件Spinner Widget怎么使用”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“jQuery UI旋轉(zhuǎn)器部件Spinner Widget怎么使用”文章能幫助大家解決問(wèn)題。
通過(guò)向上/向下按鈕和箭頭鍵處理,為輸入數(shù)值增強(qiáng)文本輸入功能。
普通的數(shù)字選擇器。
代碼
<input id="spinner"> <script> $( "#spinner" ).spinner(); </script>
旋轉(zhuǎn)器(Spinner),或數(shù)步進(jìn)控件(number stepper widget),是用于處理各種數(shù)字輸入的完美控件。它允許用戶(hù)直接輸入一個(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ù)字格式和解析。
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í),用戶(hù)可以輸入值,這可能會(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 名稱(chēng):
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-down
class。
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ù)字, 如果有效的話(huà)。 最常見(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)的值使用。
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ì)象。
_buttonHtml():這個(gè)方法返回的HTML用于spinner(微調(diào)組件)的遞增和遞減按鈕。 每個(gè)按鈕都必須給定一個(gè)ui-spinner-button
的類(lèi)名 用于相關(guān)聯(lián)的事件工作。
_uiSpinnerHtml():這個(gè)方法返回的HTML用于包裹 spinner(微調(diào)組件)元素。
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怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。