jQuery Mobile教程:jQuery Mobile基本事件

文章簡介：本文我們來認識一下jQuery Mobile的幾個比較重要的基本事件.

本文我們來認識一下jQuery Mobile的幾個比較重要的基本事件

1、mobileinit

可以利用它來擴充$.mobile或者修改預設配置

樣本：

<script type="text/javascript"> //方式1:綁定mobileinit $(document).bind("mobileinit",function(e){ //修改activePageClass $.mobile.activePageClass = "custom-ui-page-active";  //增加一個自訂屬性 $.mobile.version_inner = "zhang01"; });  //方式2:綁定mobileinit $(document).bind("mobileinit",function(e){ //增加一個自訂屬性 $.extend($.mobile,{ activePageClass:"custom-ui-page-active", version_inner:"zhang01"; }); }); </script>  //自訂指令碼需要在依賴前面 <script src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/jqm/../js/jquery.mobile-1.1.0.js" type="text/javascript"></script>

說明：
1、對mobileinit的綁定事件需要在引入jquery.mobile.js之前
2、擴充的方式有兩種哦

2、$.mobile.loadPage(url,[options])

將某個頁面載入到當前頁面中，並自動對其增強

樣本：

//給按鈕綁定tap事件 //調用loadPage，載入contact.html $("#loadContact").live("tap",function(){ $.mobile.loadPage("contact.html"); });

關於loadPage的預設參數如圖：

說明：
1、loadPage只是載入到DOM中，不會顯示

3、$.mobile.changePage(toPage,[options])

替換當前頁面

參數toPage:檔案URL或者內部的ID

樣本：

//給按鈕綁定tap事件 $("#loadCopyright").live("tap",function(){ //調用changePage，顯示一個已經在DOM的id為copyright的page $.mobile.changePage("#copyright");  //調用changePage，顯示一個contact.html $.mobile.changePage("contact.html"); });

關於changePage的預設參數如圖：

說明：
1、changePage的第一個參數可以使

4、$.mobile.showPageLoadingMsg(theme,msgText,textonly)

彈出提示資訊

參數theme:主題
參數msgText:提示文案內容
參數textonly:是否只顯示文案

樣本：

//給按鈕綁定tap事件 $("#showPageLoadingMsg").live("tap",function(){ $.mobile.showPageLoadingMsg("e","自訂提示，主題e",true); });

5、$.mobile.hidePageLoadingMsg()

關閉提示資訊

樣本：

//hidePageLoadingMsg $("#hidePageLoadingMsg").live("tap",function(){ $.mobile.hidePageLoadingMsg(); });

6、$.mobile.silentScroll(number)

垂直滾動number，不會觸發scrollstart和scrollstop

樣本：

//給按鈕綁定tap事件 //silentScroll $("#silentScroll").live("tap",function(){ $.mobile.silentScroll(300); });

7、滾動事件：

1、給window綁定scrollstart事件：

樣本：

$(window).scrollstart(function(e){ var scrollTop = $(e.target).scrollTop(); $("#scrollinfo").text("scrollstart:"+scrollTop); });

2、給window綁定scrollstop事件：

樣本：

$(window).scrollstop(function(e){ var scrollTop = $(e.target).scrollTop(); $("#scrollinfo").text("scrollstop:"+scrollTop); });

demo