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