jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget
通過向上/向下按鈕和箭頭鍵處理,為輸入數(shù)值增強(qiáng)文本輸入功能。
一、實(shí)例
普通的數(shù)字選擇器。
代碼
<input id="spinner"> <script> $( "#spinner" ).spinner(); </script>
旋轉(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)器不是只讀()時(shí),用戶可以輸入值,這可能會(huì)產(chǎn)生無效的值(小于最小值,大于最大值,增減錯(cuò)配,非數(shù)字輸入)。當(dāng)增減時(shí),不管通過編程方式還是旋轉(zhuǎn)按鈕方式,值都會(huì)被強(qiáng)制為一個(gè)有效值(如需了解詳情,請(qǐng)查看 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í)例化的 元素。ui-spinner-button
:用于遞增或遞減旋轉(zhuǎn)器值的按鈕控件。向上按鈕會(huì)另外帶有一個(gè)ui-spinner-up
class,向下按鈕會(huì)另外帶有一個(gè)ui-spinner-down
class。
四、快速導(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
,表示沒有上限。 - min:允許的最小值。 如果元素的
min
屬性存在,該選項(xiàng)未明確設(shè)置,那么該元素的min
屬性就被用作該選項(xiàng)的值。 如果為null
,表示沒有下限。 - numberFormat:通過
Globalize
格式化數(shù)字, 如果有效的話。 最常見的用于"n"
用作十進(jìn)制數(shù) 和"C"
用作貨幣值。 也看到了culture
選擇。 - page:當(dāng)通過
pageUp
/pageDown
的方法進(jìn)行分頁時(shí),采取的步數(shù)。 - step:通過按鈕或
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():通過指定頁數(shù)遞減值, 頁數(shù)由
page
選項(xiàng)定義。 如果沒有參數(shù), 單頁遞減。 - pageUp():通過指定頁數(shù)遞增值, 頁數(shù)由
page
選項(xiàng)定義。 如果沒有參數(shù), 單頁遞增。 - stepDown():通過指定步數(shù)遞減值, 步數(shù)由
step
選項(xiàng)定義。 如果沒有參數(shù), 單步遞減。 - stepUp():通過指定步數(shù)遞增值, 步數(shù)由
step
選項(xiàng)定義。 如果沒有參數(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
比較來 確定的微調(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的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于jquery的合并table相同單元格的插件(精簡(jiǎn)版)
正好項(xiàng)目中有個(gè)小需求, 要求把表格指定列中內(nèi)容相同的單元格進(jìn)行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個(gè)數(shù), 然后給第一個(gè)與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解2011-04-04jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以參考下2015-03-03深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對(duì)jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12jquery 的 $("#id").html() 無內(nèi)容的解決方法
今天在做一個(gè)輸入用到j(luò)query的.html方法,可是用.html()輸不出來2010-06-06jquery ajax 請(qǐng)求小技巧實(shí)例分析
這篇文章主要介紹了jquery ajax 請(qǐng)求小技巧,結(jié)合實(shí)例形式分析了jquery ajax請(qǐng)求操作相關(guān)配置與使用技巧,需要的朋友可以參考下2019-11-11jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果,通過css樣式控制結(jié)合jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)切換元素樣式實(shí)現(xiàn)提示框效果,非常美觀實(shí)用,需要的朋友可以參考下2015-09-09使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法,需要的朋友可以參考下2015-10-10jQuery使用prepend()方法在元素前添加內(nèi)容用法實(shí)例
這篇文章主要介紹了jQuery使用prepend()方法在元素前添加內(nèi)容的方法,實(shí)例分析了prepend方法追加內(nèi)容的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03