天天看點
傳回

使用 jQuery Mobile 與 HTML5 開發 Web App（十三） —— jQuery Mobile 方法下

本文承接上文《使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 方法上》，繼續說明 jQuery Mobile 的方法，這部分内容主要與頁面 URL 解析相關，除此之外還有其他一些實用方法。

以下兩個方法在 jQuery Mobile 1.1 中不贊成使用

八. $.mobile.fixedToolbars.show()

固定工具欄（包括固定的頭部欄和尾部欄）可以通過點選螢幕在顯示與隐藏之間切換，而這個方法則是手動顯示一次工具欄。

它具有一個參數 immediately(boolean, 可選) 。把它設定為 true ，目前激活頁面的所有固定工具欄都會立即顯示出來。若設定為 false 或者沒有指定，則會通過 100ms 的漸變顯示出來。注意如 document 的 resize 和 scroll 等事件會導緻額外的延時顯示。

例子：

1 2 3 4 5 6

// 顯示固定工具欄并且顯示預設的漸變動畫

$.mobile.fixedToolbars.show();

// 立即顯示固定工具欄

$.mobile.fixedToolbars.show(

true

);

在 jQuery Mobile 1.1 中，不建議使用該方法，jQuery Mobile 并沒有明确原因，但根據 jQuery Mobile 的習慣，這很可能是因為這個方法有很多不穩定性，如上面提到的遇到某些方法會出現額外的延時顯示，這對于建立 Web Apps 是很不好的影響因素，它會從底層部分為 Web Apps 帶來不可預知的問題。

九. $.mobile.fixedToolbars.hide()

固定工具欄（包括固定的頭部欄和尾部欄）可以通過點選螢幕在顯示與隐藏之間切換，而這個方法則是手動隐藏一次工具欄。

與 $.mobile.fixedToolbars.show() 相似，它具有一個參數 immediately(boolean, 可選) 。把它設定為 true ，目前激活頁面的所有固定的工具欄都會立即隐藏。若設定為 false 或者沒有指定，則會通過 100ms 的漸變隐藏起來。注意如 document 的 resize 和 scroll 等事件也會增加隐藏動畫的時間。

例子：

1 2 3 4 5 6

// 隐藏固定工具欄并顯示預設的漸變動畫

$.mobile.fixedToolbars.hide();

// 立即隐藏固定工具欄

$.mobile.fixedToolbars.hide(

true

);

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

十. $.mobile.path.parseUrl()

本方法用于解析一個 URL 和它的相對形式，并且它的相關成分放入一個對象中，友善通路這些 URL 相關成分。當解析相對形式的 URL 時，傳回的對象會自動為絕對形式 URL 中沒有的成分（如 protocol, host , etc ）添加空字元串作為值。另外，當解析的 URL 沒有 authority （見下面的清單），傳回的對象中的 pathname 屬性會包含通信協定冒号後的資料。

$.mobile.path.parseUrl() 隻有一個參數 URL (string, 可選) ，其值為一個 URL 的相對或絕對形式。

另外，$.mobile.path.parseUrl() 會傳回一個包含 URL 相關成分的對象，這個對象的屬性是模仿浏覽器中的 location 對象。具體的屬性如下：

  • hash URL 中的一個部分，從 URL 中第一個 "#" 開始的部分。
  • host URL 的主機名及端口。
  • hostname URL 的主機名。
  • href 被解析的原始 URL 。
  • pathname URL 所引用的檔案或目錄的路徑。
  • port URL 中指定的端口。大多數 URLs 依賴于資料傳輸協定所用的預設端口，是以這個值在大多數時候都可能是空字元串。
  • protocol 資料傳輸協定，URL 中 ':' 之前的部分。
  • search URL 中的從 "?" 字元開始的部分，代表 URL 查詢。另外它也包括提供給入口的額外成分，如一些常見形式的開發者通路。
  • authority URL 的使用者名，密碼，主機名
  • directory pathname 中的目錄部分，并且不包括任何檔案名。
  • domain URL 中的資料傳輸協定和使用者名，密碼，主機名等資訊，即域。
  • filename pathname 中的檔案部分，并且不包括任何目錄名。
  • hrefNoHash 從原始 URL 中減去 hash 部分。
  • hrefNoSearch 從原始 URL 中減去 hash 和 search 部分。
  • password authority 中的 password 部分。
  • username authority 中的 username 部分。

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 解析一個 URL

var

obj = $.mobile.path.parseUrl(

"http://jblas:[email protected]:8080/mail/inbox?msg=1234"

);

// 解析這個 URL 會傳回一個包含以下屬性的對象

// obj.href:         http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content

// obj.hrefNoHash:   http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread

// obj.hrefNoSearch: http://jblas:[email protected]:8080/mail/inbox

// obj.domain:       http://jblas:[email protected]:8080

// obj.protocol:     http:

// obj.authority:    jblas:[email protected]: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()

把一個相對的檔案或目錄路徑轉化為絕對路徑。

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

—— relPath (string, 必須)

其值為一個相對的檔案或目錄路徑。

—— absPath (string, 必須)

用于解析的一個絕對的檔案或相對的路徑。

$.mobile.path.makePathAbsolute() 會傳回一個包含相對路徑的絕對路徑版本的字元串。

例子：

1 2 3 4 5 6

// 傳回: /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()

把一個相對 URL 轉化為絕對 URL 。

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

—— relUrl (string, 必選)

一個相對形式的 URL 。

—— absUrl (string, 必選)

用于解析的一個絕對的檔案或相對的路徑。

$.mobile.path.makeUrlAbsolute() 會傳回一個包含相對 URL 的絕對 URL 版本的字元串。

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 傳回: 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(

"//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()

比較兩個 URL 的域。

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

—— url1 (string, 可選)

一個相對 URL。

—— url2 (string, 可選)

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

傳回值為 boolean 型變量，若兩個域比對，則傳回 "true" ，否則傳回 "false" 。

例子：

1 2 3 4 5 6 7 8 9 10 11 12

// 傳回: 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()

判斷一個 URL 是否是相對 URL 。

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

傳回值為 boolean 型變量，若 URL 為相對形式的 URL ，則傳回 "true" ，否則傳回 "false" 。

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 傳回: false

var

isRel = $.mobile.path.isRelativeUrl(

"http://foo.com/a/file.html"

);

// 傳回: true

var

isRel = $.mobile.path.isRelativeUrl(

"//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()

判斷一個 URL 是否是絕對 URL 。

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

傳回值為 boolean 型變量，若 URL 為絕對形式的 URL ，則傳回 "true" ，否則傳回 "false" 。

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 傳回: true

var

isAbs = $.mobile.path.isAbsoluteUrl(

"http://foo.com/a/file.html"

);

// 傳回: false

var

isAbs = $.mobile.path.isAbsoluteUrl(

"//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()

該方法可以判斷一個 URL 的目錄部分。如果 URL 末尾沒有反斜杠，則 URL 最後的部分會被認為是檔案名。這個情況對于站長來說應該不陌生，如 http://kayosite.com/aaa/ ，URL 中最後的部分 "aaa/" 應該是一個目錄，而 http://kayosite.com/aaa/xxx.zip 中最後的部分 "xxx.zip" 則應該是一個檔案名。這也是 Kayo 之前建議注意網址末尾是否需要添加反斜杠的原因。

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

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

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 傳回: 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(

"//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()

靜默滾動到某個 Y 值處，并且不觸發任何事件。

它具有一個參數，yPos (number, 預設為 0)，其值為需要滾動到的 Y 位置。

十九. $.mobile.activePage

引用目前激活的頁面。

二十. 關于方法的調用

1. 方法調用相應 JavaScript 的引入

在介紹自定義 jQuery Mobile 預設配置時，曾經說明了相應的 JavaScript 語句需要放置在 jQuery 庫和 jQuery Mobile 庫之間，而 jQuery Mobile 方法是對 jQuery Mobile 的調用，是以需要在引入 jQuery Mobile 庫之後調用，具體如下：

1 2 3 4 5 6

<

script

src

=

"jquery.min.js"

></

script

>

<!-- 引入自定義 jQuery Mobile 預設配置相應的 JavaScript -->

<

script

src

=

"custom-mobile.js"

></

script

>

<

script

src

=

"jquery-mobile.min.js"

></

script

>

<!-- 引入 jQuery Mobile 的調用，包括 jQuery Mobile 的方法、事件檢測等全部應用性 JavaScript -->

<

script

src

=

"my-site.js"

></

script

>

2. 方法的調用

對于 jQuery 開發者，應該比較習慣在觸發 ready 事件後執行 JavaScript ，例如：

1 2 3

$(document).ready(

function

(){

// 執行 JavaScript

});

或簡寫為，

1 2 3

$(

function

(){

// 執行 JavaScript

});

這裡說明一下，當 DOM 已經加載，并且頁面（包括圖像）已經完全呈現出時，會觸發 ready 事件。

而在系列文章的上一篇中，Kayo 介紹了 pageinit 事件，它在 DOM 加載完成後（包括 jQuery Mobile 對元素的 DOM 增強），就會觸發，即它比 ready 更早的觸發。

但由于 jQuery Mobile 驅動的網站由 Ajax 導航，是以即使一個文檔中包含多個 'page' ，當第一個 'page' 的 DOM 和内容加載完畢後就會觸發 ready 事件，而 pageint 也隻需第一個 'page' 的 DOM 加載完畢後即觸發。

而最終利用那種事件作為開始調用方法的合适時機，會涉及很多友善的考慮，開發者應該根據實際情況作出選擇。

下面例舉一個例子說明如何調用 jQuery Mobile 方法，由于 jQuery Mobile 的方法很多，這裡隻使用 $.mobile.changePage() 方法示範如何調用方法。例子中的 JavaScript 代碼如下：

1 2 3 4 5 6 7 8 9 10 11

$(

function

(){

$(

"#home"

).bind(

'swipeleft'

,

function

(){

$.mobile.changePage(

'./page-2.html'

, {

transition:

"slide"

,

role:

"dialog"

});

});

});

上例中通過檢測向左劃動事件觸發跳轉到一個外部頁面，同時使用 'slide' 轉場動畫并以對話框形式顯示新頁面。

也可以看 Demo（建議使用 PC 上的 Firefox、Chrome 等現代浏覽器和 IE9+ 或 Android , iPhone/iPad 的系統浏覽器浏覽，下同）。

在這個例子中，并不适合利用 pageinit 事件，下面再放上一個 Demo ，其内容與上例大緻相同，隻是利用的 pageinit 事件，讀者可以測試這個 Demo ，可能會發生不斷在兩個頁面往複來回的問題。這是因為，從第二頁傳回第一頁并觸發 pageinit 事件時，第一頁的 DOM 已加載完畢，包括 JavaScript 語句，但頁面過場并未開始，這時頁面再直接滑動，可能會重新觸發 swipeleft 事件，于是不斷往複。是以，在使用 pageinit 事件時需要考慮 jQuery Mobile 中其他事件、方法之間的互相影響。

pageinit 版本 Demo

本文由 Kayo Lee 發表，本文連結：http://kayosite.com/web-app-by-jquery-mobile-and-html5-methods-part-two.html

html5 &amp; jquerymobile
上一篇: matlab4.0官方下載下傳,matlab時頻分析工具箱
下一篇: HTML5開發移動web應用—JQuery Mobile(2)-導航欄和頁腳

繼續閱讀