jQuery Mobile開發進階：API擴展介紹

作者：廖煜嶸 2012-02-07 10:05:40

在本文中，將以例子的形式講解jQuery Mobile開發中常用的API以及如何對其進行擴展開發，本文的閱讀對象為已對jQuery Mobile有一定認識和使用經驗的開發者。

目前,jQuery Mobile是在HTML5 移動開發中的一個很不錯的框架,它為熟悉Jquery的開發者進行移動開發提供了很大方便。jQuery Mobile使用的是HTML5和CSS3，除了能提供很多基礎的移動頁面元素開發功能外，框架自身還提供了很多可供擴展的API,以供開發者擴展jQuery Mobile框架本身的功能。

準備工作

請先下載***版本的jQuery Mobile框架(***版本為1.0.1,下載地址為http://jquerymobile.com/ )。

全局設置

下面的這些jQuery Mobile列出的API，允許開發者更改其框架的默認事件行為

繼承擴展jQuery Mobile的初始化事件
創建自定義命名空間
頁面初始化
自定義子頁的KEY
設置當前激活頁的樣式
設置默認頁和對話框效果
自定義加載和自定義顯示錯誤信息

下面逐一進行介紹

繼承擴展jQuery Mobile的初始化事件

jQuery Mobile中包含了一個初始化的事件，該事件在jQuery框架的document.ready事件加載前就能被加載，名字叫mobileinit。這就允許開發者繼承和擴展jQuery Mobile的默認全局選項。為了繼承和擴展mobileinit事件，只需要將自定義的Javascript事件處理程序腳本放在jQuery Mobile庫加載前進行加載即可，但要注意放在jQuery框架本身后進行加載，如下代碼所示：

然后，為了擴展mobileinit事件，必須首先使用jquery的bind事件將自定義方法和

Mobileinit事件綁定，如下所示：

$(document).bind("mobileinit", function() {  
//在這里編寫新的全局選項代碼  
});

接下來，就可以使用jQuery的extend方法去繼承$mobile對象，然后可以簡單地通過屬性=值的方法重新設置jQuery Mobile的新的全局屬性，如下代碼：

$(document).bind("mobileinit", function() {  
　　$.extend( $.mobile , {  
　　property = value  
　　});  
　　});

如果僅是設置一個屬性值，則也可以使用如下代碼實現，而不需要繼承$mobile對象：

$(document).bind("mobileinit", function() { 
$.mobile.property = value; 
});

可以看到$.mobile對象為設置所有屬性的入口點。

jQuery Mobile創建自定義命名空間

在jQuery Mobile中，甚至可以自定義象HTML5中的data-attribute等系列屬性，比如data-role等。這通過自定義命名空間即可實現。比如可以實現自定義一個名字，變成data-自定義名-role這樣的形式，這可以通過$.mobile對象中增加ns屬性來指定，如下代碼：

$(document).bind("mobileinit", function() { 
$.mobile.ns = "my-custom-ns"; 
});

通過上面的代碼，建立了一個data-my-customer-ns-role的屬性，而不是傳統jQuery Mobile中指定的data-role。通過設置自定義的命名空間，可以方便開發者在CSS選擇器中進行指定，同時如果要自定義mobile小插件的主題，則也必須使用自定義命名空間，以示區別。

頁面初始化

jQuery Mobile提供了一個叫autoInitializePage的屬性，這個屬性表示頁面是否應該初始化，其默認值為true。然而，如果是繼承擴展了$.mobile對象，開發者則可以將該值設置為false,并且在稍晚的時候對頁面初始化進行設置。下面的代碼中，演示了當其他腳本在運行時，如何暫時延遲頁面的初始化。如果有大量的客戶端腳本運行，則一個很好的建議方法是延遲頁面的初始化，直到DOM完成加載客戶端腳本。

<!DOCTYPE HTML> 
<html> 
<head> 
  <title>Understanding the jQuery Mobile API</title> 
  <script type="text/javascript" src="jquery.js"></script> 
  <script type="text/javascript"> 
    $(document).bind("mobileinit", function() { 
      $.mobile.autoInitializePage = false; 
    }); 
  </script> 
  <script type="text/javascript" src="jquery.mobile.js"></script> 
</head>         
<body> 
  <div data-role="page"> 
    <div data-role="content"> 
      <ul data-role="listview" id="my-list"></ul> 
    </div> 
  </div> 
  <script type="text/javascript"> 
    $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>'); 
    $.mobile.autoInitializePage = true; 
  </script> 
</body> 
</html>

jQuery Mobile自定義子頁的KEY

當在jQuery Mobile中引用子頁時，默認使用的是ui-page做為KEY標識。開發者可以通過$.mobile對象的subPageUrlKey去重新設置，比如如果定義了subPageUrlKey為my-page,則默認的子頁引用將從web-page.html&ui-page=value改為 web-page.html&my-page=value,這樣做的一個好處是開發者可讓url更友善更容易維護。

jQuery Mobile設置當前激活頁面的樣式

當使用了jQuery Mobile后，默認當前激活頁面中的ui-page元素都會使用框架默認的樣式中定義的ui-page-active，如果要對其進行修改，可以設置$.mobile對象中的activePageClass屬性，比如：

$(document).bind("mobileinit", function(){ 
$.mobile.activePageClass="ui-page-custom"; 
});

其中ui-page-custome則為用戶自定義的樣式。

設置默認頁面和對話框的動畫效果

默認的jQuery Mobile的頁面和對話框的效果都是通過ajax實現的。默認的頁面切換效果是幻燈片切換，默認的對話框出現的效果是彈出。如果需要改變這些效果的話，同樣是如下代碼所示，設置$.mobile對象的defaultPageTransition和defaultDialogTransition屬性就可以了。

$(document).bind("mobileinit", function() { 
$.mobile.defaultPageTransition = "fade"; 
$.mobile.defaultDialogTransition = "fade"; 
});

jQuery Mobile提供了6種效果供用戶選擇，分別是：slide, slideup, slidedown, pop, fade, 和flip，用戶可以按照上面的方法進行設置。

自定義加載及錯誤信息.

另外兩個全局設置參數是加載及錯誤顯示信息。加載信息會在加載頁面時顯示給用戶看，要更改這個設置，只需要修改$.mobile對象的loadingMessage屬性即可，如下：

$(document).bind("mobileinit", function() { 
$.mobile.loadingMessage = "Please wait"; 
});

同樣，可以設置$.mobile對象的屬性pageLoadErrorMessage來自定義錯誤信息，如下：

$(document).bind("mobileinit", function() { 
$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.'; 
});

#p#

深入jQuery Mobile的事件

現在，我們來深入jQuery Mobile的事件，我們可以通過jQuery Mobile的API來擴展如下的事件類型。

Touch事件
方向Orientation事件
滾動scroll事件

Touch事件

在jQuery Mobile中，有不少關于touch的事件。其中主要的有如下5類：tap,taphold,swipe,sipeleft,swiperight，它們的含義如下：

**Touch事件**
事件名	含義
tap	當用戶點屏幕時觸發
taphold	當用戶點屏幕且保持觸摸超過1秒時觸發
swipe	當頁面被垂直或者水平拖動時觸發。這個事件有其相關聯的屬性，分別為scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft	當頁面被拖動到左邊方向時觸發
swiperight	當頁面被拖動到右邊方向時觸發

要綁定這些事件，只需要在document.ready()中進行編程即可，如下代碼示例：

<!DOCTYPE HTML> 
<html> 
<head> 
  <title>Understanding the jQuery Mobile API</title> 
  <link rel="stylesheet" href="jquery.mobile.css" /> 
  <script src="jquery.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function(){ 
      $(".tap-hold-test").bind("taphold", function(event) { 
        $(this).html("Tapped and held"); 
      });   
    }); 
  </script> 
  <script src="jquery.mobile.js"></script> 
</head> 
 
<body> 
  <div data-role="page" id="my-page"> 
    <div data-role="header"> 
            <h1>Header</h1> 
        </div> 
        <div data-role="content"> 
            <ul data-role="listview" id="my-list"> 
                <li class="tap-hold-test">Tap and hold test</li> 
            </ul> 
    </div> 
  </div> 
</body> 
</html>

從上面的代碼可以看到，將一個list列表跟taphold事件進行了綁定，當DOM加載完畢后，當觸發taphold事件后，就會顯示Tapped and held的提示信息。

jQuery Mobile方向感應事件

在現在的智能手機中，都有對方向變換的自動感知功能，比如當手機方向從水平方向切換到垂直方向時，則會觸發該事件。在jQuery Mobile中，可以通過

orientationchange事件進行綁定，并且可以設定是垂直方向還是水平方向，如下代碼所示：

$(document).ready(function(){ 
$('body').bind('orientationchange', function(event) { 
alert('orientationchange: '+ event.orientation); 
}); 
});

在上面的代碼中，通過對body元素綁定orientationchange事件，并顯示出當前的orientation屬性。但要注意的是，即使在 DOM加載完后，還是應該重新調用該事件，因為在DOM加載時有時可能orientationchange事件還沒能完全加載完畢，所以應該按如下的方法在ready加載后，再加載一次：

$(document).ready(function(){ 
$('body').bind('orientationchange', function(event) { 
alert('orientationchange: '+ event.orientation); 
}); 
$('body').trigger('orientationchange'); 
});

jQuery Mobile滾動事件

當用戶在設備上滾動頁面時，jQuery Mobile提供了滾動事件進行監聽。其中首先介紹的是scrollstart事件，該事件發生在頁面滾動開始時，如下代碼：

$(document).ready(function(){ 
$('body').bind('scrollstart', function(event) { 
//相關的滾動開始代碼 
}); 
});

同樣，當滾動停止后，則可以用scrollstop事件進行監聽，如下代碼：

$(document).ready(function(){ 
$('body').bind('scrollstop', function(event) { 
//相關滾動停止的代碼 
}); 
});

#p#

jQuery Mobile API提供的一些實用方法

在jQuery Mobile框架API中，還提供了一些實用的方法，下面逐一簡單介紹。

1)動態改變頁面

在jQuery Mobile中，可以使用動態改變頁面，比如從一個頁面到另一個頁面可以編程來改變.該方法用于頁面間跳轉，以點擊一個鏈接或者提交表單的形式出現，比如如下代碼：

在上面的代碼中，在my-list的listview中，動態增加了兩個鏈接，一種page-2.html是靜態的，而另外一個鏈接，是當用戶點該鏈接時，再觸發跳轉到page-2.html。其中，注意到這里使用的是mobile對象的changepage事件，其中帶兩個參數，***個參數是目標頁面 (就是這里的page-2.html),第2個參數是各種跳轉的效果，分為如下幾個：

transition、 reverse、changeHash、 role、pageContainer、 type、data、reloadPage

下面舉出幾個相關例子：

//以slideup效果 跳轉到 "about us" 頁面 
$.mobile.changePage("about/us.html", "slideup"); 
//跳轉到 "search results" 頁面，提交id為 "search"的表單數據 
$.mobile.changePage({ 
url: "searchresults.php"， 
type: "get"， 
data: $("form#search").serialize() 
});

2) 靜態加載頁面

另外一個$.mobile對象的重要實用方法是loadPage。開發者可以從外部加載一個頁面，在渲染后插入到當前頁面的DOM中，并且不會影響到當前顯示的頁面內容。這個方法可以讓我們在不影響當前顯示頁面的情況下在后臺加載頁面，這個方法經常用在需要預加載頁面的情況下，并且可以通過$.mobile.changePage()方法來跳轉到這個預加載的頁面，只需配置URL參數就可以了。例子如下：

Link to another page

3) $.mobile對象的一些實用工具方法

$.mobile對象的一些實用工具方法，小結如下表：

方法名描述

$.mobile.path.parseUrl 將一個URL進行解析成帶有16個屬性的對象
$.mobile.path.makePathAbsolute 將文件或目錄轉變為帶絕對路徑的形式
$.mobile.path.makeUrlAbsolute 將一個相對路徑轉變為一個絕對路徑
$.mobile.path.isSameDomain 對比兩個URL是否相同
$.mobile.path.isRelativeUrl 判斷地址是否相對地址
$.mobile.path.isAbsoluteUrl 判斷地址是否絕對地址
$.mobile.path.base 得出URL地址的base部分

小結

本文中介紹了jQuery Mobile在事件和處理屬性方面的一些高級用法，并給出了相關例子，希望對讀者有所幫助，更多的幫助請參考jQuery Mobile的幫助文檔。

責任編輯：佚名來源： it168

jQuery Mobile jQuery Mobile API