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