jQuery Mobile的API事件
觸摸事件
tap
在快速完整的一次觸摸后觸發(fā)該事件.
taphold
在按住不放后觸發(fā)該事件(接近一秒鐘的時(shí)間).Triggers after a held complete touch event (close to one second).
swipe
在一秒鐘的間隔內(nèi)水平方向上拖動(dòng)30px以上會(huì)觸發(fā)該事件,(水平方向上拖動(dòng)要保持在20px以?xún)?nèi),否則不會(huì)觸發(fā)).
swipeleft
在左邊方向移動(dòng)時(shí)觸發(fā)該事件.
swiperight
在右邊方向移動(dòng)時(shí)觸發(fā)該事件..
方向改變事件
orientationchange
當(dāng)設(shè)備的方向改變時(shí)觸發(fā) (把設(shè)備轉(zhuǎn)到垂直或者水平方向). 你綁定到此事件的回調(diào)函數(shù)可以有一個(gè)第二參數(shù), 該參數(shù)包含一個(gè)orientation屬性,該屬性可以設(shè)置為"portrait" 或 "landscape".這些值也被添加為HTML元素的classes,你也可以在你的css選擇器里指定它們. 要注意,當(dāng)orientationChange不被支持時(shí)我們現(xiàn)目前將綁定resize事件作為替代.
滾動(dòng)事件
scrollstart
當(dāng)滾動(dòng)開(kāi)始時(shí)觸發(fā).要注意的是,IOS設(shè)備在滾動(dòng)時(shí)會(huì)禁止DOM操作,并將DOM操作排隊(duì),當(dāng)滾動(dòng)結(jié)束時(shí)才執(zhí)行這些操作.我們現(xiàn)在正在研究是否能夠讓DOM操作在滾動(dòng)之前執(zhí)行
scrollstop
滾動(dòng)結(jié)束時(shí)觸發(fā).
頁(yè)面 顯示/隱藏 事件
在jQuery Mobile里,無(wú)論一個(gè)page在什么時(shí)候處于顯示或者隱藏狀態(tài),這兩個(gè)事件都會(huì)在這個(gè)page觸發(fā).事件的觸發(fā)依賴(lài)于該page是否正在顯示或者隱藏,所以,當(dāng)一個(gè)page過(guò)渡發(fā)生,會(huì)有4個(gè)事件被觸發(fā):每個(gè)page觸發(fā)兩個(gè).
pagebeforeshow
當(dāng)page正在被顯示但在它的過(guò)渡效果開(kāi)始前觸發(fā).
pagebeforehide
當(dāng)page正在被隱藏但在它的過(guò)渡效果開(kāi)始前觸發(fā).
pageshow
當(dāng)page正在被顯示但在它的過(guò)渡效果結(jié)束后觸發(fā).
pagehide
當(dāng)page正在被隱藏但在它的過(guò)渡效果結(jié)束后觸發(fā).
要注意這四個(gè)事件都引用了"下一頁(yè)" (nextPage) 或者"上一頁(yè)" (prevPage), 依賴(lài)于page是否正在顯示或者隱藏且"下一頁(yè)"或"上一頁(yè)"存在(***個(gè)page顯示時(shí)并沒(méi)有"上一頁(yè)",但是同樣會(huì)引用一個(gè)空的jQuery對(duì)象). 你可以通過(guò)在第二個(gè)參數(shù)綁定一個(gè)回調(diào)函數(shù)來(lái)訪問(wèn)這個(gè)引用.比如:
- $('div').live('pageshow',function(event, ui){
- alert('This page was just hidden: '+ ui.prevPage);
- });
- $('div').live('pagehide',function(event, ui){
- alert('This page was just shown: '+ ui.nextPage);
- });
當(dāng)然,這些處理程序會(huì)在初始化page加載時(shí)被調(diào)用(invoked),你必須在jquery 執(zhí)行之前就bind它們. 這些事情可以在mobileinit處理程序中完成,詳情參見(jiàn)global config
頁(yè)面初始化事件
在jQuery Mobile內(nèi)部,自動(dòng)初始化插件基于被設(shè)置有"page"標(biāo)簽的標(biāo)記.例如:一個(gè)type為 range 的input元素 會(huì)自動(dòng)的生成一個(gè)slider控件.
這種自動(dòng)初始化是被"page"插件所控制,它會(huì)在它執(zhí)行前后調(diào)度事件,并允許你在初始化前后操作頁(yè)面, 或者甚至允許你提供你自己的初始化行為來(lái)阻止自動(dòng)初始化. 要注意,這些事件每個(gè)"page"只會(huì)被觸發(fā)一次,與每次頁(yè)面在顯示或者隱藏的show/hide事件剛剛相反.
pagebeforecreate
在頁(yè)面正在初始化的時(shí)候觸發(fā)(在初始化完成之前).
pagecreate
在頁(yè)面正在初始化的時(shí)候觸發(fā)(在初始化完成之后).
要注意,通過(guò)綁定 pagebeforecreate事件并且返回false, 你可以阻止頁(yè)面插件它們自己的操作.
注意:"Page ID": jQuery Mobile中的page元素使用 ID 屬性來(lái)存儲(chǔ)他們的來(lái)源位置.當(dāng)你在page上設(shè)置一個(gè)ID屬性時(shí)將會(huì)通過(guò)ajax把該page加載到j(luò)Query Mobile的"單一頁(yè)面"環(huán)境. jQuery Mobile會(huì)用一個(gè)新的div("page")元素來(lái)包裹住該,并為你的ID頁(yè)面保存所有css設(shè)置. 然而,這意味著你的ID屬性將不會(huì)出現(xiàn)在這個(gè)"page"元素上,所以你在綁定page事件的時(shí)候考慮到這一點(diǎn). (比如:pagebeforecreate, pagecreate ,等). 為了避免這個(gè)問(wèn)題,你可以嘗試使用class. |
動(dòng)畫(huà)事件
jQuery Mobile公開(kāi)了animationComplete 插件, 你可以添加或者移除一個(gè)class來(lái)實(shí)現(xiàn)css的過(guò)渡效果.