jQuery Mobile是針對(duì)移動(dòng)端開(kāi)發(fā)的JavaScript框架,正如其名基于jQuery庫(kù),jQuery Mobile主要被用來(lái)操作HTML5設(shè)計(jì)頁(yè)面UI,下面就來(lái)看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):

一. $.mobile.changePage() & $.mobile.loadPage()

1.$.mobile.changePage()

$.mobile.changePage() 方法會(huì)在頁(yè)面加載時(shí)自動(dòng)調(diào)用，若這個(gè)頁(yè)面為當(dāng)前文檔中的不同 "page"，則會(huì)轉(zhuǎn)到這個(gè)新頁(yè)面隱藏舊頁(yè)面；若這個(gè)頁(yè)面為外部頁(yè)面，即頁(yè)面與當(dāng)前頁(yè)面不在同一文檔中（本質(zhì)上是新頁(yè)面不在當(dāng)前 DOM 中），$.mobile.changePage() 首先會(huì)調(diào)用 $.mobile.loadPage() 把外部頁(yè)面的元素插入到 DOM 中，再顯示新頁(yè)面。這也是對(duì)頁(yè)面加載過(guò)程的簡(jiǎn)單復(fù)述。

$.mobile.changePage() 有兩個(gè)參數(shù) to (string or object, 必須) 和 options (object, 可選)，具體如下：

（1）—— to (string or object, 必須)

to 為必要參數(shù)，其值可以為 string(字符串，如 "about/us.html") 或 object(對(duì)象，如 $("#about"))，這主要是面向兩種不同的頁(yè)面，string 形式的為外部頁(yè)面鏈接，而 object 為同一文檔中的不同 "page" ，如 "#page2" ，$.mobile.changePage() 會(huì)把其處理成包含這個(gè) DOM 的 jQuery 對(duì)象，即 $('#page2') 這種形式，而 $.mobile.changePage() 內(nèi)部會(huì)判斷 to 參數(shù)的形式，若是 string 則調(diào)用 $.mobile.loadPage() 把外部頁(yè)面的元素插入到 DOM 中，再顯示頁(yè)面。

（2）—— options (object, 可選)

options 為可選參數(shù)，其值為 object （對(duì)象），這個(gè) object 包含多個(gè)屬性，這些屬性?xún)?chǔ)存一個(gè)頁(yè)面的各種參數(shù)，jQuery Mobile 會(huì)根據(jù)這些參數(shù)來(lái)控制如何加載頁(yè)面，以及對(duì)頁(yè)面進(jìn)行初始化。具體屬性值如下：

allowSamePageTransition (boolean, 默認(rèn)值: false) 默認(rèn)情況下，$.mobile.changePage() 是不會(huì)理會(huì)跳轉(zhuǎn)到當(dāng)前頁(yè)面的請(qǐng)求。把這個(gè)屬性設(shè)置為 "true" ，則可以允許這種請(qǐng)求

changeHash (boolean, 默認(rèn)值: true) 判斷地址欄上的哈希值是否應(yīng)該被更新。

data (object 或 string, 默認(rèn)值: undefined) Ajax 請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)。僅當(dāng) to 參數(shù)的值為一個(gè) URL 時(shí)可用。

dataUrl (string, 默認(rèn)值: undefined) 當(dāng)瀏覽器完成頁(yè)面轉(zhuǎn)換時(shí)要更新瀏覽器的地址欄上的 URL 。如不特別指定，則使用 data-url 的屬性值。

pageContainer (jQuery collection, 默認(rèn)值: $.mobile.pageContainer) 指定包含頁(yè)面的 DOM 對(duì)象的 jQuery 對(duì)象。

reloadPage (boolean, 默認(rèn)值: false) 強(qiáng)制刷新頁(yè)面，即使頁(yè)面容器的 DOM 已經(jīng)準(zhǔn)備好仍然會(huì)執(zhí)行刷新。僅當(dāng) to 參數(shù)的值為一個(gè) URL 時(shí)可用。

reverse (boolean, 默認(rèn)值: false) 設(shè)置頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的方向。當(dāng)該屬性設(shè)置為 "true" 時(shí)頁(yè)面轉(zhuǎn)場(chǎng)反向。

role (string, 默認(rèn)值: undefined) 顯示頁(yè)面的時(shí)候使用 data-role 值。默認(rèn)情況下為 undefined，即取決于元素的 @data-role 屬性值（標(biāo)簽上 data-role 的值）。

showLoadMsg (boolean, 默認(rèn)值: true) 設(shè)置當(dāng)加載外部頁(yè)面時(shí)是否顯示加載提示信息。

transition (string, 默認(rèn)值: $.mobile.defaultPageTransition) 設(shè)置頁(yè)面加載時(shí)使用的過(guò)場(chǎng)動(dòng)畫(huà)。

type (string, default: "get") 設(shè)置請(qǐng)求頁(yè)面時(shí)使用的方法 ("get" 或 "post") 。僅當(dāng) to 參數(shù)的值為一個(gè) URL 時(shí)可用。

這里引用例子說(shuō)明一下 $.mobile.changePage() 的使用方法，手動(dòng)調(diào)用該方法可以觸發(fā)跳轉(zhuǎn)到一個(gè)新頁(yè)面，例如，在 Web Apps 發(fā)生錯(cuò)誤時(shí)可以跳轉(zhuǎn)到一個(gè)提示錯(cuò)誤的頁(yè)面。

// 轉(zhuǎn)入到 "about us" 頁(yè)面并使用 "slideup" 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

$.mobile.changePage( "about/us.html", { transition: "slideup"} );

// 轉(zhuǎn)入到 "search results" 頁(yè)面, 使用 來(lái)自 id 為 search 的表單數(shù)據(jù)，并把頁(yè)面請(qǐng)求方式改為 "post"

$.mobile.changePage('searchresults.php', {

  type: "post",

  data: $("form#search").serialize()

});

// 轉(zhuǎn)入到 "confirm" 頁(yè)面并使用 "pop" 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，不更新歷史記錄（地址欄哈希值不更新）

$.mobile.changePage('../alerts/confirm.html', {

  transition: "pop",

  reverse: false,

  changeHash: false

});

發(fā)生錯(cuò)誤時(shí)可以跳轉(zhuǎn)到一個(gè)提示錯(cuò)誤的頁(yè)面。

$(function(){

  // 發(fā)生錯(cuò)誤

  // 已 "slideup" 的方式彈出對(duì)話框提示發(fā)生了錯(cuò)誤

  $.mobile.changePage('../alerts/confirm.html', {

    transition: "slideup",

    role: "dialog"

  });

});

2.$.mobile.loadPage()

如上面所述，$.mobile.loadPage() 用于加載一個(gè)外部頁(yè)面，但這里的加載是指把外部頁(yè)面的元素插入到當(dāng)前 DOM 中，并在插入之前對(duì)頁(yè)面內(nèi)容進(jìn)行 jQuery Mobile 增強(qiáng) 。該方法會(huì)被 $.mobile.changePage() 調(diào)用，條件是 $.mobile.loadPage() 的第一個(gè)參數(shù) to 為 string （即加載的頁(yè)面為外部頁(yè)面）。這個(gè)方法僅僅是進(jìn)行插入 DOM 操作，不會(huì)影響當(dāng)前激活的頁(yè)面，所以它可以用于在后臺(tái)加載頁(yè)面（只插入 DOM 而不顯示頁(yè)面），該方法會(huì)返回一個(gè) deferred 對(duì)象，包含頁(yè)面請(qǐng)求成功與否等相關(guān)信息，并會(huì)在頁(yè)面增強(qiáng)和插入 DOM 后分解這個(gè)對(duì)象。

$.mobile.loadPage() 有兩個(gè)參數(shù) url (string or object, 必須) 和 options (object, 可選)，具體情況如下：

（1）—— url (string or object, 必須)

該參數(shù)的值可以為 string 或 object ，無(wú)論是何種形式，必須為一個(gè)絕對(duì)或相對(duì) URL 。若是由 $.mobile.changePage() 調(diào)用本方法時(shí)，則該參數(shù)值為 $.mobile.changePage() 的 to 參數(shù)值。

（2）—— options (object, 可選)

options 為可選參數(shù)，其值為 object （對(duì)象），實(shí)際上如由 $.mobile.changePage() 調(diào)用本方法時(shí)，該參數(shù)值為 $.mobile.changePage() 的 options 參數(shù)值。因此這個(gè) object 與 $.mobile.changePage() 的 options 選項(xiàng)值相同，其具體屬性值請(qǐng)參考 $.mobile.changePage() 中 options 的屬性值。

這里引用例子說(shuō)明一下 $.mobile.loadPage() 的使用方法，手動(dòng)調(diào)用該方法可以在后臺(tái)加載外部頁(yè)面的元素并且不影響當(dāng)前激活頁(yè)面。

// 把 "about us" 頁(yè)面加載到 DOM

$.mobile.loadPage('about/us.html');

// 轉(zhuǎn)入到 "search results" 頁(yè)面, 使用來(lái)自 id 為 search 的表單數(shù)據(jù)，并把頁(yè)面請(qǐng)求方式改為 "post"

$.mobile.loadPage('searchresults.php', {

  type: "post",

  data: $('form#search').serialize()

});

二. $.fn.jqmData() & $.fn.jqmRemoveData()

當(dāng)頁(yè)面中使用了 jQuery Mobile ，jQuery Mobile 會(huì)使用 jqmData 和 jqmRemoveData 代替 jQuery 核心的 data 和 removeData 方法（注意，這包括了 jQuery 中的 $.fn.data , $.fn.removeData , $.data , $.removeData 和 $.hasData），這兩個(gè)方法會(huì)自動(dòng)獲取和設(shè)置 data 屬性的命名空間（即使當(dāng)前沒(méi)有使用命名空間）。

這兩個(gè)方法的參數(shù)對(duì)應(yīng)著 jQuery 的 data 和 removeData 方法的參數(shù)，具體如下：

（1）—— jqmData( jQuery.data() )

element 與該 data 屬性相關(guān)聯(lián)的 DOM 對(duì)象

key data 的命名字符串

value data 屬性的值

（2）—— jqmRemoveData ( jQuery.removeData() )

element 與需要移除 data 屬性相關(guān)聯(lián)的 DOM 對(duì)象

name 需要移除的 data 的命名字符串

注意：當(dāng)通過(guò) jQuery Mobile data 屬性尋找元素時(shí)，請(qǐng)使用自定義選擇器：jqmData() ，它會(huì)在查詢(xún)?cè)貢r(shí)自動(dòng)合并 data 屬性的命名空間。例如，你應(yīng)該使用 $('div:jqmData(role="page")') 代替 $('div[data-role="page"]') ，因?yàn)榍罢邥?huì)自動(dòng)映射到 $("div[data-"+ $.mobile.ns +'role="page"]') ，而不需要強(qiáng)制把選擇器與命名空間連接起來(lái)。例如：命名空間為 rn ，若使用后者即為 $('div[data-rn-role="page"]') ，這時(shí)如果更改了命名空間，則這個(gè)選擇器便會(huì)失效，而使用前者則會(huì)自動(dòng)映射到當(dāng)前選擇器中，即使更改命名空間也不會(huì)造成這個(gè)選擇器失效。

但是也有例外的情況，就是根據(jù) URL 值在命名空間中選擇 data 屬性，例如，jQuery Mobile 可以使用 :jqmData(url) 跟蹤一個(gè)頁(yè)面來(lái)自哪里，根據(jù) URL 中的命名空間來(lái)選擇空間內(nèi)的 data 屬性。這要求需要在選擇器的括號(hào)內(nèi)填寫(xiě)一個(gè)有效的 URL 。

三. $.fn.jqmEnhanceable()

這是判斷元素是否要進(jìn)行 jQuery Mobile 增強(qiáng)的方法，默認(rèn)情況下，所有 jQuery Mobile 組件都會(huì)通過(guò)此方法放入 jQuery Mobile 增強(qiáng)集，以交給另一函數(shù)進(jìn)行 jQuery Mobile 增強(qiáng)，包括添加相應(yīng)的 HTML , CSS class 和交互。這是 jQuery Mobile 默認(rèn)調(diào)用的方法，并且沒(méi)有任何可選參數(shù)，但該方法仍有一個(gè)很值得注意的地方，在方法的實(shí)現(xiàn)函數(shù)內(nèi)部，會(huì)判斷默認(rèn)配置 $.mobile.ignoreContentEnabled 的值，若為 true ，則會(huì)對(duì)調(diào)用該方法的 jQuery 對(duì)象的 DOM 父節(jié)點(diǎn)遍歷，若父節(jié)點(diǎn)標(biāo)簽上設(shè)置了 data-enhance = "false" ，則不讓該 DOM 對(duì)象加入增強(qiáng)集。事實(shí)上 jQuery Mobile 的官方文檔并沒(méi)有闡述 $.fn.jqmEnhanceable() 的具體使用方法，反而用了不少篇幅介紹這個(gè)注意事項(xiàng)。

另外還需要注意的是，遍歷操作會(huì)設(shè)計(jì)元素的所有父節(jié)點(diǎn)，因此即使遍歷一個(gè)很小的 jQuery 對(duì)象集的父節(jié)點(diǎn)也會(huì)消耗很多資源，開(kāi)發(fā)則需要謹(jǐn)慎使用。若開(kāi)發(fā)時(shí)已經(jīng)明確不需要對(duì)某元素進(jìn)行增強(qiáng)，建議還是直接不使用 data-role 觸發(fā)相應(yīng)的組件。

而如何設(shè)置 $.mobile.ignoreContentEnabled 的值，可以參考《使用 jQuery Mobile 與 HTML5 開(kāi)發(fā) Web App —— jQuery Mobile 默認(rèn)配置與事件基礎(chǔ)》

四. $.fn.jqmHijackable()

這是判斷元素是否加入 jQuery Mobile Ajax 導(dǎo)航，即使用 Ajax 進(jìn)行處理的方法，與 $.fn.jqmEnhanceable() 相似，默認(rèn)情況下這也是會(huì)為所有鏈接和表單提交執(zhí)行，使到它們可以加入 jQuery Mobile Ajax 處理集合，交給另一函數(shù)處理。在 jQuery Mobile 內(nèi)部，本方法與 $.fn.jqmEnhanceable() 最終都是調(diào)用了 haveParents 方法，來(lái)判斷元素是否應(yīng)該加入相應(yīng)的集合。因此，本方法執(zhí)行時(shí)會(huì)判斷默認(rèn)配置 $.mobile.ignoreContentEnabled ，若為 true ，則會(huì)對(duì)調(diào)用該方法的 jQuery 對(duì)象的 DOM 父節(jié)點(diǎn)遍歷，若父節(jié)點(diǎn)上標(biāo)簽上設(shè)置了 data-ajax = "false" ，則不讓該 DOM 對(duì)象加入 Ajax 導(dǎo)航集。當(dāng)然，在使用這個(gè)特性時(shí)也需要注意遍歷帶來(lái)的大量資源消耗。

五. $.mobile.loading()

該方法從 jQuery Mobile 1.2 開(kāi)始正式引進(jìn)，控制顯示或隱藏頁(yè)面加載信息，包含兩個(gè)參數(shù)，第一個(gè)是控制頁(yè)面信息加載與否，只有 "show" 和 "hide" 兩個(gè)值，第二個(gè)參數(shù)為多屬性對(duì)象，具體的屬性如下：

theme (string, 默認(rèn)值: "a") 加載信息條的主題樣式

text (string, 默認(rèn)值: "loading") 加載信息條的文字內(nèi)容

textonly (boolean, 默認(rèn)值: false) 若設(shè)置為 true ，則加載頁(yè)面時(shí) "spinner" 圖片（即旋形加載提示圖，1.0 及之前版本為條形加載圖）會(huì)被隱藏。

textVisible (boolean, 默認(rèn)值: false) 若設(shè)置為 true ,提示的文字內(nèi)容會(huì)置于 spinner 之下

html (string, 默認(rèn)值: "") 如果個(gè)屬性值不為空，則這個(gè)值會(huì)替代整個(gè)加載信息條的 HTML

下面引用例子說(shuō)明 $.mobile.loading 的使用方法。

// 提示頁(yè)面正在加載

$.mobile.loading('show');

// 加載信息條使用主題樣式 "b" , 自定義提示文字內(nèi)容，隱藏 "spinner" 圖片

$.mobile.loading('show', { theme: 'b', text: '給力的加載中', textonly: true });

以下兩個(gè)方法在 jQuery Mobile 1.2 中不贊成使用

六. $.mobile.hidePageLoadingMsg()

顯示頁(yè)面加載信息，基于 $.mobile.loadingMessage 配置出來(lái)，具體有三個(gè)參數(shù)

theme (string, default: "a") The theme swatch for the message.

msgText (string, default: "loading") The text of the message.

textonly (boolean, default: false) If true, the "spinner" image will be hidden when the message is shown.

例子：

// 使用主題樣式 "b" ，自定義提示文字內(nèi)容，隱藏 "spinner" 圖片

$.mobile.showPageLoadingMsg('b', 'This is only a test', true);

在 jQuery Mobile 1.2 中，建議使用 $.mobile.loading('show') 代替。

七. $.mobile.hidePageLoadingMsg()

隱藏頁(yè)面加載信息，基于 $.mobile.loadingMessage 配置出來(lái)，沒(méi)有參數(shù)。

例子：

// 隱藏頁(yè)面加載提示信息

$.mobile.hidePageLoadingMsg();

在 jQuery Mobile 1.2 中，建議使用 $.mobile.loading('hide') 代替。

八. $.mobile.fixedToolbars.show()

固定工具欄（包括固定的頭部欄和尾部欄）可以通過(guò)點(diǎn)擊屏幕在顯示與隱藏之間切換，而這個(gè)方法則是手動(dòng)顯示一次工具欄。

它具有一個(gè)參數(shù) immediately(boolean, 可選) 。把它設(shè)置為 true ，當(dāng)前激活頁(yè)面的所有固定工具欄都會(huì)立即顯示出來(lái)。若設(shè)置為 false 或者沒(méi)有指定，則會(huì)通過(guò) 100ms 的漸變顯示出來(lái)。注意如 document 的 resize 和 scroll 等事件會(huì)導(dǎo)致額外的延時(shí)顯示。

例子：

// 顯示固定工具欄并且顯示默認(rèn)的漸變動(dòng)畫(huà)

$.mobile.fixedToolbars.show();

// 立即顯示固定工具欄

$.mobile.fixedToolbars.show(true);

在 jQuery Mobile 1.1 中，不建議使用該方法，jQuery Mobile 并沒(méi)有明確原因，但根據(jù) jQuery Mobile 的習(xí)慣，這很可能是因?yàn)檫@個(gè)方法有很多不穩(wěn)定性，如上面提到的遇到某些方法會(huì)出現(xiàn)額外的延時(shí)顯示，這對(duì)于建立 Web Apps 是很不好的影響因素，它會(huì)從底層部分為 Web Apps 帶來(lái)不可預(yù)知的問(wèn)題。

九. $.mobile.fixedToolbars.hide()

固定工具欄（包括固定的頭部欄和尾部欄）可以通過(guò)點(diǎn)擊屏幕在顯示與隱藏之間切換，而這個(gè)方法則是手動(dòng)隱藏一次工具欄。

與 $.mobile.fixedToolbars.show() 相似，它具有一個(gè)參數(shù) immediately(boolean, 可選) 。把它設(shè)置為 true ，當(dāng)前激活頁(yè)面的所有固定的工具欄都會(huì)立即隱藏。若設(shè)置為 false 或者沒(méi)有指定，則會(huì)通過(guò) 100ms 的漸變隱藏起來(lái)。注意如 document 的 resize 和 scroll 等事件也會(huì)增加隱藏動(dòng)畫(huà)的時(shí)間。

例子：

// 隱藏固定工具欄并顯示默認(rèn)的漸變動(dòng)畫(huà)

$.mobile.fixedToolbars.hide();

// 立即隱藏固定工具欄

$.mobile.fixedToolbars.hide(true);

在 jQuery Mobile 1.1 中，也不建議使用該方法。

十. $.mobile.path.parseUrl()

本方法用于解析一個(gè) URL 和它的相對(duì)形式，并且它的相關(guān)成分放入一個(gè)對(duì)象中，方便訪問(wèn)這些 URL 相關(guān)成分。當(dāng)解析相對(duì)形式的 URL 時(shí)，返回的對(duì)象會(huì)自動(dòng)為絕對(duì)形式 URL 中沒(méi)有的成分（如 protocol, host , etc ）添加空字符串作為值。另外，當(dāng)解析的 URL 沒(méi)有 authority （見(jiàn)下面的列表），返回的對(duì)象中的 pathname 屬性會(huì)包含通信協(xié)議冒號(hào)后的數(shù)據(jù)。

$.mobile.path.parseUrl() 只有一個(gè)參數(shù) URL (string, 可選) ，其值為一個(gè) URL 的相對(duì)或絕對(duì)形式。

另外，$.mobile.path.parseUrl() 會(huì)返回一個(gè)包含 URL 相關(guān)成分的對(duì)象，這個(gè)對(duì)象的屬性是模仿瀏覽器中的 location 對(duì)象。具體的屬性如下：

hash URL 中的一個(gè)部分，從 URL 中第一個(gè) "#" 開(kāi)始的部分。

host URL 的主機(jī)名及端口。

hostname URL 的主機(jī)名。

href 被解析的原始 URL 。

pathname URL 所引用的文件或目錄的路徑。

port URL 中指定的端口。大多數(shù) URLs 依賴(lài)于數(shù)據(jù)傳輸協(xié)議所用的默認(rèn)端口，所以這個(gè)值在大多數(shù)時(shí)候都可能是空字符串。

protocol 數(shù)據(jù)傳輸協(xié)議，URL 中 ':' 之前的部分。

search URL 中的從 "?" 字符開(kāi)始的部分，代表 URL 查詢(xún)。另外它也包括提供給入口的額外成分，如一些常見(jiàn)形式的開(kāi)發(fā)者訪問(wèn)。

authority URL 的用戶名，密碼，主機(jī)名

directory pathname 中的目錄部分，并且不包括任何文件名。

domain URL 中的數(shù)據(jù)傳輸協(xié)議和用戶名，密碼，主機(jī)名等信息，即域。

filename pathname 中的文件部分，并且不包括任何目錄名。

hrefNoHash 從原始 URL 中減去 hash 部分。

hrefNoSearch 從原始 URL 中減去 hash 和 search 部分。

password authority 中的 password 部分。

username authority 中的 username 部分。

例子：

// 解析一個(gè) URL

var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");

// 解析這個(gè) URL 會(huì)返回一個(gè)包含以下屬性的對(duì)象

// obj.href:     http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content

// obj.hrefNoHash:  http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread

// obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox

// obj.domain:    http://jblas:password@mycompany.com:8080

// obj.protocol:   http:

// obj.authority:  jblas:password@mycompany.com:8080

// obj.username:   jblas

// obj.password:   password

// obj.host:     mycompany.com:8080

// obj.hostname:   mycompany.com

// obj.port:     8080

// obj.pathname:   /mail/inbox

// obj.directory:  /mail/

// obj.filename:   inbox

// obj.search:    ?msg=1234&type=unread

// obj.hash:     #msg-content

十一. $.mobile.path.makePathAbsolute()

把一個(gè)相對(duì)的文件或目錄路徑轉(zhuǎn)化為絕對(duì)路徑。

具有兩個(gè)參數(shù) relPath (string, 必須) 和 absPath (string, 必須) ，具體如下：

（1）—— relPath (string, 必須)

其值為一個(gè)相對(duì)的文件或目錄路徑。

（2）—— absPath (string, 必須)

用于解析的一個(gè)絕對(duì)的文件或相對(duì)的路徑。

$.mobile.path.makePathAbsolute() 會(huì)返回一個(gè)包含相對(duì)路徑的絕對(duì)路徑版本的字符串。

例子：

// 返回: /a/b/c/file.html

var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");

// 返回: /a/foo/file.html

var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");

十二. $.mobile.path.makeUrlAbsolute()

把一個(gè)相對(duì) URL 轉(zhuǎn)化為絕對(duì) URL 。

具有兩個(gè)參數(shù) relUrl (string, 必選) 和 absUrl (string, 必選) ，具體如下：

—— relUrl (string, 必選)

一個(gè)相對(duì)形式的 URL 。

—— absUrl (string, 必選)

用于解析的一個(gè)絕對(duì)的文件或相對(duì)的路徑。

$.mobile.path.makeUrlAbsolute() 會(huì)返回一個(gè)包含相對(duì) URL 的絕對(duì) URL 版本的字符串。

例子：

// 返回: http://foo.com/a/b/c/file.html

var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");

// 返回: http://foo.com/a/foo/file.html

var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");

// 返回: http://foo.com/bar/file.html

var absUrl = $.mobile.path.makeUrlAbsolute("http://foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");

// 返回: http://foo.com/a/b/c/test.html?a=1&b=2

var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&b=2", "http://foo.com/a/b/c/test.html");

// 返回: http://foo.com/a/b/c/test.html#bar

var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");

十三. $.mobile.path.isSameDomain()

比較兩個(gè) URL 的域。

具有兩個(gè)參數(shù) url1 (string, 可選) 和 url2 (string, 可選) 具體情況如下：

—— url1 (string, 可選)

一個(gè)相對(duì) URL。

—— url2 (string, 可選)

url2 (string, required) 一個(gè)需要解析的絕對(duì) URL 。

返回值為 boolean 型變量，若兩個(gè)域匹配，則返回 "true" ，否則返回 "false" 。

例子：

// 返回: true

var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

// 返回: false

var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

// 返回: false

var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");

// 返回: false

var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");

十四. $.mobile.path.isRelativeUrl()

判斷一個(gè) URL 是否是相對(duì) URL 。

它具有一個(gè)參數(shù) URL (string, 必選) ，其值為一個(gè)相對(duì)或絕對(duì)的 URL 。

返回值為 boolean 型變量，若 URL 為相對(duì)形式的 URL ，則返回 "true" ，否則返回 "false" 。

例子：

// 返回: false

var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");

// 返回: true

var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");

// 返回: true

var isRel = $.mobile.path.isRelativeUrl("/a/file.html");

// 返回: true

var isRel = $.mobile.path.isRelativeUrl("file.html");

// 返回: true

var isRel = $.mobile.path.isRelativeUrl("?a=1&b=2");

// 返回: true

var isRel = $.mobile.path.isRelativeUrl("#foo");

十五. $.mobile.path.isAbsoluteUrl()

判斷一個(gè) URL 是否是絕對(duì) URL 。

它具有一個(gè)參數(shù) URL (string, 必選) ，其值為一個(gè)相對(duì)或絕對(duì)的 URL 。

返回值為 boolean 型變量，若 URL 為絕對(duì)形式的 URL ，則返回 "true" ，否則返回 "false" 。

例子：

// 返回: true

var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");

// 返回: false

var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");

// 返回: false

var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");

// 返回: false

var isAbs = $.mobile.path.isAbsoluteUrl("file.html");

// 返回: false

var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&b=2");

// 返回: false

var isAbs = $.mobile.path.isAbsoluteUrl("#foo");

十六. $.mobile.path.get()

該方法可以判斷一個(gè) URL 的目錄部分。如果 URL 末尾沒(méi)有反斜杠，則 URL 最后的部分會(huì)被認(rèn)為是文件名。這個(gè)情況對(duì)于站長(zhǎng)來(lái)說(shuō)應(yīng)該不陌生，如 http://kayosite.com/aaa/ ，URL 中最后的部分 "aaa/" 應(yīng)該是一個(gè)目錄，而 http://kayosite.com/aaa/xxx.zip 中最后的部分 "xxx.zip" 則應(yīng)該是一個(gè)文件名。這也是 Kayo 之前建議注意網(wǎng)址末尾是否需要添加反斜杠的原因。

這個(gè)方法具有一個(gè)參數(shù) url (string, 必選) ，其值是一個(gè)相對(duì)或絕對(duì)的 URL 。

返回值為 URL 中的目錄部分。

例子：

// 返回: http://foo.com/a/

var dirName = $.mobile.path.get("http://foo.com/a/file.html");

// 返回: http://foo.com/a/

var dirName = $.mobile.path.get("http://foo.com/a/");

// 返回: http://foo.com/a

var dirName = $.mobile.path.get("http://foo.com/a");

// 返回: //foo.com/a/

var dirName = $.mobile.path.get("http://foo.com/a/file.html");

// 返回: /a/

var dirName = $.mobile.path.get("/a/file.html");

// 返回: ""

var dirName = $.mobile.path.get("file.html");

// 返回: /

var dirName = $.mobile.path.get("/file.html");

// 返回: ?a=1&b=2

var dirName = $.mobile.path.get("?a=1&b=2");

// 返回: foo

var dirName = $.mobile.path.isAbsoluteUrl("#foo");

十七. $.mobile.base

獲取根元素。

十八. $.mobile.silentScroll()

靜默滾動(dòng)到某個(gè) Y 值處，并且不觸發(fā)任何事件。

它具有一個(gè)參數(shù)，yPos (number, 默認(rèn)為 0)，其值為需要滾動(dòng)到的 Y 位置。

十九. $.mobile.activePage

引用當(dāng)前激活的頁(yè)面。

二十. 關(guān)于方法的調(diào)用

1. 方法調(diào)用相應(yīng) JavaScript 的引入

在介紹自定義 jQuery Mobile 默認(rèn)配置時(shí)，曾經(jīng)說(shuō)明了相應(yīng)的 JavaScript 語(yǔ)句需要放置在 jQuery 庫(kù)和 jQuery Mobile 庫(kù)之間，而 jQuery Mobile 方法是對(duì) jQuery Mobile 的調(diào)用，因此需要在引入 jQuery Mobile 庫(kù)之后調(diào)用，具體如下：

<script src="jquery.min.js"></script>

<!-- 引入自定義 jQuery Mobile 默認(rèn)配置相應(yīng)的 JavaScript -->

<script src="custom-mobile.js"></script>

<script src="jquery-mobile.min.js"></script>

<!-- 引入 jQuery Mobile 的調(diào)用，包括 jQuery Mobile 的方法、事件檢測(cè)等全部應(yīng)用性 JavaScript -->

<script src="my-site.js"></script>

2. 方法的調(diào)用

對(duì)于 jQuery 開(kāi)發(fā)者，應(yīng)該比較習(xí)慣在觸發(fā) ready 事件后執(zhí)行 JavaScript ，例如：

$(document).ready(function(){

  // 執(zhí)行 JavaScript

});

或簡(jiǎn)寫(xiě)為，

$(function(){

  // 執(zhí)行 JavaScript

});

這里說(shuō)明一下，當(dāng) DOM 已經(jīng)加載，并且頁(yè)面（包括圖像）已經(jīng)完全呈現(xiàn)出時(shí)，會(huì)觸發(fā) ready 事件。

而在系列文章的上一篇中，Kayo 介紹了 pageinit 事件，它在 DOM 加載完成后（包括 jQuery Mobile 對(duì)元素的 DOM 增強(qiáng)），就會(huì)觸發(fā)，即它比 ready 更早的觸發(fā)。

但由于 jQuery Mobile 驅(qū)動(dòng)的網(wǎng)站由 Ajax 導(dǎo)航，因此即使一個(gè)文檔中包含多個(gè) 'page' ，當(dāng)?shù)谝粋€(gè) 'page' 的 DOM 和內(nèi)容加載完畢后就會(huì)觸發(fā) ready 事件，而 pageint 也只需第一個(gè) 'page' 的 DOM 加載完畢后即觸發(fā)。

而最終利用那種事件作為開(kāi)始調(diào)用方法的合適時(shí)機(jī)，會(huì)涉及很多方便的考慮，開(kāi)發(fā)者應(yīng)該根據(jù)實(shí)際情況作出選擇。

下面例舉一個(gè)例子說(shuō)明如何調(diào)用 jQuery Mobile 方法，由于 jQuery Mobile 的方法很多，這里只使用 $.mobile.changePage() 方法演示如何調(diào)用方法。例子中的 JavaScript 代碼如下：

$(function(){

  $("#home").bind('swipeleft', function(){

    $.mobile.changePage('./page-2.html', {

      transition: "slide",

      role: "dialog"

    });

  });

});

上例中通過(guò)檢測(cè)向左劃動(dòng)事件觸發(fā)跳轉(zhuǎn)到一個(gè)外部頁(yè)面，同時(shí)使用 'slide' 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)并以對(duì)話框形式顯示新頁(yè)面。