jQuery Mobile開(kāi)發(fā)進(jìn)階：API擴(kuò)展介紹
目前,jQuery Mobile是在HTML5 移動(dòng)開(kāi)發(fā)中的一個(gè)很不錯(cuò)的框架,它為熟悉Jquery的開(kāi)發(fā)者進(jìn)行移動(dòng)開(kāi)發(fā)提供了很大方便。jQuery Mobile使用的是HTML5和CSS3，除了能提供很多基礎(chǔ)的移動(dòng)頁(yè)面元素開(kāi)發(fā)功能外，框架自身還提供了很多可供擴(kuò)展的API,以供開(kāi)發(fā)者擴(kuò)展jQuery Mobile框架本身的功能。
準(zhǔn)備工作
請(qǐng)先下載***版本的jQuery Mobile框架(***版本為1.0.1,下載地址為http://jquerymobile.com/ )。
全局設(shè)置
下面的這些jQuery Mobile列出的API，允許開(kāi)發(fā)者更改其框架的默認(rèn)事件行為
- 繼承擴(kuò)展jQuery Mobile的初始化事件
- 創(chuàng)建自定義命名空間
- 頁(yè)面初始化
- 自定義子頁(yè)的KEY
- 設(shè)置當(dāng)前激活頁(yè)的樣式
- 設(shè)置默認(rèn)頁(yè)和對(duì)話(huà)框效果
- 自定義加載和自定義顯示錯(cuò)誤信息
下面逐一進(jìn)行介紹
繼承擴(kuò)展jQuery Mobile的初始化事件
jQuery Mobile中包含了一個(gè)初始化的事件，該事件在jQuery框架的document.ready事件加載前就能被加載，名字叫mobileinit。這就允許開(kāi)發(fā)者繼承和擴(kuò)展jQuery Mobile的默認(rèn)全局選項(xiàng)。為了繼承和擴(kuò)展mobileinit事件，只需要將自定義的Javascript事件處理程序腳本放在jQuery Mobile庫(kù)加載前進(jìn)行加載即可，但要注意放在jQuery框架本身后進(jìn)行加載，如下代碼所示：
然后，為了擴(kuò)展mobileinit事件，必須首先使用jquery的bind事件將自定義方法和
Mobileinit事件綁定，如下所示：
- $(document).bind("mobileinit", function() {
- //在這里編寫(xiě)新的全局選項(xiàng)代碼
- });
接下來(lái)，就可以使用jQuery的extend方法去繼承$mobile對(duì)象，然后可以簡(jiǎn)單地通過(guò)屬性=值的方法重新設(shè)置jQuery Mobile的新的全局屬性，如下代碼：
- $(document).bind("mobileinit", function() {
- $.extend( $.mobile , {
- property = value
- });
- });
如果僅是設(shè)置一個(gè)屬性值，則也可以使用如下代碼實(shí)現(xiàn)，而不需要繼承$mobile對(duì)象：
- $(document).bind("mobileinit", function() {
- $.mobile.property = value;
- });
可以看到$.mobile對(duì)象為設(shè)置所有屬性的入口點(diǎn)。
jQuery Mobile創(chuàng)建自定義命名空間
在jQuery Mobile中，甚至可以自定義象HTML5中的data-attribute等系列屬性，比如data-role等。這通過(guò)自定義命名空間即可實(shí)現(xiàn)。比如可以實(shí)現(xiàn)自定義一個(gè)名字，變成data-自定義名-role這樣的形式，這可以通過(guò)$.mobile對(duì)象中增加ns屬性來(lái)指定，如下代碼：
- $(document).bind("mobileinit", function() {
- $.mobile.ns = "my-custom-ns";
- });
通過(guò)上面的代碼，建立了一個(gè)data-my-customer-ns-role的屬性，而不是傳統(tǒng)jQuery Mobile中指定的data-role。通過(guò)設(shè)置自定義的命名空間，可以方便開(kāi)發(fā)者在CSS選擇器中進(jìn)行指定，同時(shí)如果要自定義mobile小插件的主題，則也必須使用自定義命名空間，以示區(qū)別。
頁(yè)面初始化
jQuery Mobile提供了一個(gè)叫autoInitializePage的屬性，這個(gè)屬性表示頁(yè)面是否應(yīng)該初始化，其默認(rèn)值為true。然而，如果是繼承擴(kuò)展了$.mobile對(duì)象，開(kāi)發(fā)者則可以將該值設(shè)置為false,并且在稍晚的時(shí)候?qū)?yè)面初始化進(jìn)行設(shè)置。下面的代碼中，演示了當(dāng)其他腳本在運(yùn)行時(shí)，如何暫時(shí)延遲頁(yè)面的初始化。如果有大量的客戶(hù)端腳本運(yùn)行，則一個(gè)很好的建議方法是延遲頁(yè)面的初始化，直到DOM完成加載客戶(hù)端腳本。
- <!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自定義子頁(yè)的KEY
當(dāng)在jQuery Mobile中引用子頁(yè)時(shí)，默認(rèn)使用的是ui-page做為KEY標(biāo)識(shí)。開(kāi)發(fā)者可以通過(guò)$.mobile對(duì)象的subPageUrlKey去重新設(shè)置，比如如果定義了subPageUrlKey為my-page,則默認(rèn)的子頁(yè)引用將從web-page.html&ui-page=value改為 web-page.html&my-page=value,這樣做的一個(gè)好處是開(kāi)發(fā)者可讓url更友善更容易維護(hù)。
jQuery Mobile設(shè)置當(dāng)前激活頁(yè)面的樣式
當(dāng)使用了jQuery Mobile后，默認(rèn)當(dāng)前激活頁(yè)面中的ui-page元素都會(huì)使用框架默認(rèn)的樣式中定義的ui-page-active，如果要對(duì)其進(jìn)行修改，可以設(shè)置$.mobile對(duì)象中的activePageClass屬性，比如：
- $(document).bind("mobileinit", function(){
- $.mobile.activePageClass="ui-page-custom";
- });
其中ui-page-custome則為用戶(hù)自定義的樣式。
設(shè)置默認(rèn)頁(yè)面和對(duì)話(huà)框的動(dòng)畫(huà)效果
默認(rèn)的jQuery Mobile的頁(yè)面和對(duì)話(huà)框的效果都是通過(guò)ajax實(shí)現(xiàn)的。默認(rèn)的頁(yè)面切換效果是幻燈片切換，默認(rèn)的對(duì)話(huà)框出現(xiàn)的效果是彈出。如果需要改變這些效果的話(huà) ，同樣是如下代碼所示，設(shè)置$.mobile對(duì)象的defaultPageTransition和defaultDialogTransition屬性就可以了。
- $(document).bind("mobileinit", function() {
- $.mobile.defaultPageTransition = "fade";
- $.mobile.defaultDialogTransition = "fade";
- });
jQuery Mobile提供了6種效果供用戶(hù)選擇，分別是：slide, slideup, slidedown, pop, fade, 和flip，用戶(hù)可以按照上面的方法進(jìn)行設(shè)置。
自定義加載及錯(cuò)誤信息.
另外兩個(gè)全局設(shè)置參數(shù)是加載及錯(cuò)誤顯示信息。加載信息會(huì)在加載頁(yè)面時(shí)顯示給用戶(hù)看，要更改這個(gè)設(shè)置，只需要修改$.mobile對(duì)象的loadingMessage屬性即可，如下：
- $(document).bind("mobileinit", function() {
- $.mobile.loadingMessage = "Please wait";
- });
同樣，可以設(shè)置$.mobile對(duì)象的屬性pageLoadErrorMessage來(lái)自定義錯(cuò)誤信息，如下：
- $(document).bind("mobileinit", function() {
- $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
- });
#p#
深入jQuery Mobile的事件
現(xiàn)在，我們來(lái)深入jQuery Mobile的事件，我們可以通過(guò)jQuery Mobile的API來(lái)擴(kuò)展如下的事件類(lèi)型。
- Touch事件
- 方向Orientation事件
- 滾動(dòng)scroll事件
Touch事件
在jQuery Mobile中，有不少關(guān)于touch的事件。其中主要的有如下5類(lèi)：tap,taphold,swipe,sipeleft,swiperight，它們的含義如下：
| 事件名 | 含義 |
| tap | 當(dāng)用戶(hù)點(diǎn)屏幕時(shí)觸發(fā) |
| taphold |
當(dāng)用戶(hù)點(diǎn)屏幕且保持觸摸超過(guò)1秒時(shí)觸發(fā) |
| swipe | 當(dāng)頁(yè)面被垂直或者水平拖動(dòng)時(shí)觸發(fā)。這個(gè)事件有其相關(guān)聯(lián)的屬性，分別為scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold |
| swipeleft | 當(dāng)頁(yè)面被拖動(dòng)到左邊方向時(shí)觸發(fā) |
| swiperight | 當(dāng)頁(yè)面被拖動(dòng)到右邊方向時(shí)觸發(fā) |
要綁定這些事件，只需要在document.ready()中進(jìn)行編程即可，如下代碼示例：
- <!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>
從上面的代碼可以看到，將一個(gè)list列表跟taphold事件進(jìn)行了綁定，當(dāng)DOM加載完畢后，當(dāng)觸發(fā)taphold事件后，就會(huì)顯示Tapped and held的提示信息。
jQuery Mobile方向感應(yīng)事件
在現(xiàn)在的智能手機(jī)中，都有對(duì)方向變換的自動(dòng)感知功能，比如當(dāng)手機(jī)方向從水平方向切換到垂直方向時(shí)，則會(huì)觸發(fā)該事件。在jQuery Mobile中，可以通過(guò)
orientationchange事件進(jìn)行綁定，并且可以設(shè)定是垂直方向還是水平方向，如下代碼所示：
- $(document).ready(function(){
- $('body').bind('orientationchange', function(event) {
- alert('orientationchange: '+ event.orientation);
- });
- });
在上面的代碼中，通過(guò)對(duì)body元素綁定orientationchange事件，并顯示出當(dāng)前的orientation屬性。但要注意的是，即使在 DOM加載完后，還是應(yīng)該重新調(diào)用該事件，因?yàn)樵贒OM加載時(shí)有時(shí)可能orientationchange事件還沒(méi)能完全加載完畢，所以應(yīng)該按如下的方法在ready加載后，再加載一次：
- $(document).ready(function(){
- $('body').bind('orientationchange', function(event) {
- alert('orientationchange: '+ event.orientation);
- });
- $('body').trigger('orientationchange');
- });
jQuery Mobile滾動(dòng)事件
當(dāng)用戶(hù)在設(shè)備上滾動(dòng)頁(yè)面時(shí)，jQuery Mobile提供了滾動(dòng)事件進(jìn)行監(jiān)聽(tīng)。其中首先介紹的是scrollstart事件，該事件發(fā)生在頁(yè)面滾動(dòng)開(kāi)始時(shí)，如下代碼：
- $(document).ready(function(){
- $('body').bind('scrollstart', function(event) {
- //相關(guān)的滾動(dòng)開(kāi)始代碼
- });
- });
同樣，當(dāng)滾動(dòng)停止后，則可以用scrollstop事件進(jìn)行監(jiān)聽(tīng)，如下代碼：
- $(document).ready(function(){
- $('body').bind('scrollstop', function(event) {
- //相關(guān)滾動(dòng)停止的代碼
- });
- });
#p#
jQuery Mobile API提供的一些實(shí)用方法
在jQuery Mobile框架API中，還提供了一些實(shí)用的方法，下面逐一簡(jiǎn)單介紹。
1)動(dòng)態(tài)改變頁(yè)面
在jQuery Mobile中，可以使用動(dòng)態(tài)改變頁(yè)面，比如從一個(gè)頁(yè)面到另一個(gè)頁(yè)面可以編程來(lái)改變.該方法用于頁(yè)面間跳轉(zhuǎn)，以點(diǎn)擊一個(gè)鏈接或者提交表單的形式出現(xiàn)，比如如下代碼：
在上面的代碼中，在my-list的listview中，動(dòng)態(tài)增加了兩個(gè)鏈接，一種page-2.html是靜態(tài)的，而另外一個(gè)鏈接，是當(dāng)用戶(hù)點(diǎn)該鏈接時(shí)，再觸發(fā)跳轉(zhuǎn)到page-2.html。其中，注意到這里使用的是mobile對(duì)象的changepage事件，其中帶兩個(gè)參數(shù)，***個(gè)參數(shù)是目標(biāo)頁(yè)面 (就是這里的page-2.html),第2個(gè)參數(shù)是各種跳轉(zhuǎn)的效果，分為如下幾個(gè)：
transition、 reverse、changeHash、 role、pageContainer、 type、data、reloadPage
下面舉出幾個(gè)相關(guān)例子：
- //以slideup效果 跳轉(zhuǎn)到 "about us" 頁(yè)面
- $.mobile.changePage("about/us.html", "slideup");
- //跳轉(zhuǎn)到 "search results" 頁(yè)面，提交id為 "search"的表單數(shù)據(jù)
- $.mobile.changePage({
- url: "searchresults.php"，
- type: "get"，
- data: $("form#search").serialize()
- });
2) 靜態(tài)加載頁(yè)面
另外一個(gè)$.mobile對(duì)象的重要實(shí)用方法是loadPage。開(kāi)發(fā)者可以從外部加載一個(gè)頁(yè)面，在渲染后插入到當(dāng)前頁(yè)面的DOM中，并且不會(huì)影響到當(dāng)前顯示的頁(yè)面內(nèi)容。這個(gè)方法可以讓我們?cè)诓挥绊懏?dāng)前顯示頁(yè)面的情況下在后臺(tái)加載頁(yè)面，這個(gè)方法經(jīng)常用在需要預(yù)加載頁(yè)面的情況下，并且可以通過(guò)$.mobile.changePage()方法來(lái)跳轉(zhuǎn)到這個(gè)預(yù)加載的頁(yè)面，只需配置URL參數(shù)就可以了。例子如下：
Link to another page
3) $.mobile對(duì)象的一些實(shí)用工具方法
$.mobile對(duì)象的一些實(shí)用工具方法，小結(jié)如下表：
方法名描述
- $.mobile.path.parseUrl 將一個(gè)URL進(jìn)行解析成帶有16個(gè)屬性的對(duì)象
- $.mobile.path.makePathAbsolute 將文件或目錄轉(zhuǎn)變?yōu)閹Ы^對(duì)路徑的形式
- $.mobile.path.makeUrlAbsolute 將一個(gè)相對(duì)路徑轉(zhuǎn)變?yōu)橐粋€(gè)絕對(duì)路徑
- $.mobile.path.isSameDomain 對(duì)比兩個(gè)URL是否相同
- $.mobile.path.isRelativeUrl 判斷地址是否相對(duì)地址
- $.mobile.path.isAbsoluteUrl 判斷地址是否絕對(duì)地址
- $.mobile.path.base 得出URL地址的base部分
小結(jié)
本文中介紹了jQuery Mobile在事件和處理屬性方面的一些高級(jí)用法，并給出了相關(guān)例子，希望對(duì)讀者有所幫助，更多的幫助請(qǐng)參考jQuery Mobile的幫助文檔。
