jQuery Mobile組件：頁(yè)面和對(duì)話框
頁(yè)面剖析
jQuery Mobile的"page"模型被優(yōu)化為可以支持單個(gè)頁(yè)面或者頁(yè)面內(nèi)嵌的"page".(譯注:這里的page和傳統(tǒng)意義上的頁(yè)面有所不同,在jquery mobile里指的是page模型或者結(jié)構(gòu),data-role="page"的一個(gè)div就是一個(gè)page)
這個(gè)模型的目標(biāo)是允許開(kāi)發(fā)者在創(chuàng)建站點(diǎn)時(shí)利用***實(shí)踐 — 傳統(tǒng)的鏈接就是起作用了,不需要任何特別配置 — 在創(chuàng)建 一個(gè)富客戶端,類似于本地應(yīng)用程序可不能簡(jiǎn)單的依靠標(biāo)準(zhǔn)的HTTP請(qǐng)求來(lái)達(dá)到.
page的結(jié)構(gòu)
一個(gè)jQuery Mobile 的站點(diǎn)必須采用 HTML5 的'doctype' 標(biāo)簽才能充分利用框架的特性.(一些早期的上網(wǎng)設(shè)備不知道 HTML5為安全的忽略'doctype'標(biāo)簽 和很多定制屬性.) 在'head'標(biāo)簽里,jQuery Mobile,jQuery和主題css文件等像如下開(kāi)始:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
- </head>
- <body>
- ...
- </body>
- </html>
在 標(biāo)簽里, 每一個(gè)視圖或者'page'被一個(gè)元素(通常是 div)設(shè)置data-role="page" 屬性后所唯一標(biāo)識(shí):
- <div data-role="page">
- ...
- </div>
在"page"容器內(nèi)部,任何有效的HTML標(biāo)記都可以使用,但是對(duì)于典型的jQuery Mobile頁(yè)面而言,一個(gè)'page'的直接 子元素是 帶有 data-role 為 "header", "content", and "footer"的div.
- <div data-role="page">
- <div data-role="header">...</div>
- <div data-role="content">...</div>
- <div data-role="footer">...</div>
- </div>
完整的page模版
總的說(shuō)來(lái),這是標(biāo)準(zhǔn)的樣板page你應(yīng)該使用的:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>Page Title</h1>
- </div><!-- /header -->
- <div data-role="content">
- <p>Page content goes here.</p>
- </div><!-- /content -->
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /footer -->
- </div><!-- /page -->
- </body>
- </html>
查看該模版
外部頁(yè)面鏈接
jQuery Mobile 自動(dòng)化了創(chuàng)建ajax站點(diǎn)和程序的過(guò)程.
默認(rèn)情況下,當(dāng)你點(diǎn)擊一個(gè)鏈接時(shí)會(huì)指向一個(gè)外部頁(yè)面(如.products.html), 但是框架會(huì)解析該鏈接的 href屬性然后發(fā)出一個(gè)ajax請(qǐng)求(Hijax)并顯示正在加載的提示.
如果ajax請(qǐng)求成功,新頁(yè)面內(nèi)容會(huì)添加到DOM當(dāng)中,所有mobile widget都是自動(dòng)初始化的,然后新頁(yè)面會(huì)動(dòng)畫過(guò)渡顯示出來(lái).
如果ajax請(qǐng)求失敗,框架會(huì)顯示一個(gè)小小的錯(cuò)誤消息提示('e'調(diào)板的樣式),并會(huì)在一小段時(shí)間內(nèi)消失, 并且不會(huì)破壞當(dāng)前的導(dǎo)航流(譯注:即頁(yè)面不會(huì)刷新也不會(huì)對(duì)前進(jìn)后退按鈕有影響). 錯(cuò)誤頁(yè)面測(cè)試
內(nèi)部頁(yè)面鏈接
單個(gè)HTML文檔可以包含多個(gè)'page',只需要在一個(gè)頁(yè)面包含 多個(gè)data-role="page"的div即可,每個(gè)pagediv必須由一個(gè)唯一的ID (id="foo") ,而鏈接到相應(yīng)頁(yè)面使用錨記即可(href="#foo").當(dāng)點(diǎn)擊一個(gè)鏈接時(shí), 框架會(huì)尋找id為錨記href的內(nèi)部'page'并顯示到當(dāng)前界面中.
要注意如果你正在通過(guò)ajax從一個(gè)mobile頁(yè)面鏈接到一個(gè)含有多個(gè)內(nèi)部頁(yè)面的頁(yè)面,你需要為該鏈接添加一個(gè) rel="external" 或者 data-ajax="false" . 該屬性告知框架對(duì)頁(yè)面進(jìn)行重新加載 ,url hash也將清零.這點(diǎn)十分關(guān)鍵,因?yàn)閍jax 頁(yè)面使用 hash(#)來(lái)追蹤ajax歷史,當(dāng)含有多個(gè)內(nèi)部page的頁(yè)面使用hash 來(lái)指示內(nèi)部page時(shí)會(huì)發(fā)生沖突.
舉例來(lái)說(shuō),一個(gè)指向含有多個(gè)內(nèi)部page的頁(yè)面的鏈接會(huì)像這樣:
- <a href="multipage.html" rel="external">Multi-page link</a>
這兒有個(gè)2 'page'頁(yè)面的例子,由兩個(gè)jQuery Mobile div構(gòu)建,每個(gè)div由其ID來(lái)導(dǎo)航,要注意 這些page上的ID只需要支持內(nèi)部的頁(yè)面鏈接,如果每個(gè)頁(yè)面是分離的HTML文檔,這些ID則是可選的. 以下是兩個(gè)page,在body 元素里面.
- <body>
- <!-- Start of first page -->
- <div data-role="page" id="foo">
- <div data-role="header">
- <h1>Foo</h1>
- </div><!-- /header -->
- <div data-role="content">
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p>View internal page called <a href="#bar">bar</a></p>
- </div><!-- /content -->
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /header -->
- </div><!-- /page -->
- <!-- Start of second page -->
- <div data-role="page" id="bar">
- <div data-role="header">
- <h1>Bar</h1>
- </div><!-- /header -->
- <div data-role="content">
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p><a href="#foo">Back to foo</a></p>
- </div><!-- /content -->
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div><!-- /header -->
- </div><!-- /page -->
- </body>
查看多page模板
請(qǐng)注意: 由于我們使用了hash來(lái)為所有ajax 'page' 追蹤歷史記錄,現(xiàn)目前來(lái)說(shuō), 在一個(gè)jQuery Mobile page里還不可能把鏈接作為普通的錨記(index.html#foo), 因?yàn)榭蚣軙?huì)尋找一個(gè) ID 為 #foo 'page' 來(lái)跳轉(zhuǎn),而不是像普通HTML頁(yè)面那樣滾動(dòng)含有該ID的內(nèi)容.
后退鏈接
如果你對(duì)一個(gè)a標(biāo)簽使用 data-rel="back" 屬性,任何在上面的點(diǎn)擊都會(huì)模擬后退按鈕,而忽略它的href屬性. 這點(diǎn)在鏈接回一個(gè)已命名的頁(yè)面十分有用,比如當(dāng)有一個(gè)到'home'鏈接或者當(dāng)用javascript生成一個(gè)后退按鈕時(shí), 或者一個(gè)按鈕用來(lái)關(guān)閉一個(gè)對(duì)話框.當(dāng)在你的源代碼使用這個(gè)特性的時(shí)候,一定要提供一個(gè)有意義的href實(shí)際指出引用頁(yè)面的URL (這會(huì)使得該特性也能在C級(jí)瀏覽器中也能起作用). 同樣,請(qǐng)記住如果你只是單純使用一個(gè)后退過(guò)渡而不在歷史記錄中真正后退,你可以使用 data-direction="reverse"來(lái)替代.
重定向和鏈接到目錄
當(dāng)鏈接至一個(gè)目錄地址時(shí)(比如用 href="typesofcats/"來(lái)替代 href="typesofcats/index.html"), 你必須提供一個(gè)后置 斜杠.這是因?yàn)閖Query Mobile假定在url中***一個(gè)"/" 后面的部分是一個(gè)文件名,jQuery Mobile會(huì)移除該部分,以便 在未來(lái)有頁(yè)面被引用時(shí)創(chuàng)建基地址.
然而,你可以通過(guò)返回已經(jīng)指定了data-url屬性的page div來(lái)解決該問(wèn)題. jQuery Mobile會(huì)使用該屬性的值來(lái)更新URL來(lái)替換過(guò)去請(qǐng)求的那個(gè)頁(yè)面. 這也允許你返回url的更改來(lái)作為重定向的結(jié)果,舉例來(lái)說(shuō),你可以提交一個(gè)表單到"/login.html",但是成功提交后返回一個(gè) url "/account". 該工具允許你在一些程度上控制jQuery Mobile 的歷史記錄棧,以下是一些例子:
這個(gè)鏈接指向"docs-links-urltest/index.html",該鏈接是一個(gè)目錄里的索引頁(yè) : Test Link 返回的頁(yè)面會(huì)用"docs/pages/docs-links-urltest/"(包含后置斜杠)來(lái)更新hash,這是通過(guò)那個(gè)頁(yè)面的data-url的值來(lái)完成的. 謹(jǐn)記這個(gè)值會(huì)替換整個(gè)hash,是否替換取決于你自己,當(dāng)刷新或者深入鏈接時(shí)URL發(fā)出的請(qǐng)求能解析正確的頁(yè)面.#p#
頁(yè)面過(guò)渡
Page transitions
jQuery Mobile 框架包括六個(gè)以CSS為基礎(chǔ)的過(guò)渡， 可以應(yīng)用于任何對(duì)象或頁(yè)面change事件， 適用于導(dǎo)航時(shí)以所選擇的過(guò)渡效果跳轉(zhuǎn)到新的一頁(yè)，以及為后退按鈕設(shè)置的逆向過(guò)渡效果。 默認(rèn)情況下，框架采用從右至左的滑動(dòng)(slide)的過(guò)渡效果。
要設(shè)置自定義的過(guò)渡效果，添加 data-transition 屬性到該鏈接。 可能的值包括：
- <a href="index.html" data-transition="pop">I'll pop</a>
這是一個(gè)動(dòng)畫的網(wǎng)頁(yè)過(guò)渡效果，我們?yōu)殒溄犹砑恿艘粋€(gè) data-transition屬性。
由于它使用CSS transform，這應(yīng)該會(huì)在許多移動(dòng)設(shè)備上得到硬件加速效果。
此外，你也可以強(qiáng)制指定一個(gè)data-direction="reverse" 用以在你的鏈接上實(shí)現(xiàn)"backwards"過(guò)渡。 注：(這是以前的data-back="true"，這將繼續(xù)被支持到1.0版本)#p#
對(duì)話框
創(chuàng)建對(duì)話框
任何頁(yè)面鏈接中加入 data-rel="dialog"屬性后都可以被看作一個(gè)模態(tài)對(duì)話框。 當(dāng)"dialog"屬性被應(yīng)用，框架會(huì)為頁(yè)面增加一些樣式,包括圓角，頁(yè)邊空白,深色背景來(lái)讓對(duì)話框看起來(lái)像懸浮在頁(yè)面上。
- <a href="foo.html" data-rel="dialog">打開(kāi)對(duì)話框</a>
打開(kāi)對(duì)話框過(guò)渡
由于對(duì)話框是一個(gè)標(biāo)準(zhǔn)的“page”，它將以適用于所有page的標(biāo)準(zhǔn)過(guò)渡效果打開(kāi)。 和其他page一樣,你可以指定你想要的任何過(guò)渡效果,只需要加入data-transition 屬性到該鏈接。 為了感覺(jué)更像對(duì)話框,我們建議你指定"pop", "slideup" 或者 "flip" 過(guò)渡效果。
- <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
data-transition="pop" data-transition="slidedown" data-transition="flip"關(guān)閉對(duì)話框
當(dāng)點(diǎn)擊任何一個(gè)是在對(duì)話框中的鏈接時(shí)，框架會(huì)自動(dòng)關(guān)閉對(duì)話框并過(guò)渡到請(qǐng)求的頁(yè)面， 就好像對(duì)話框是一個(gè)正常的page。要?jiǎng)?chuàng)建一個(gè)“取消”對(duì)話框按鈕，只需鏈接到觸發(fā)對(duì)話框打開(kāi)的page, 然后添加 data-rel="back" 屬性，這種模式在non-JS的設(shè)備中同樣適用。
對(duì)于JavaScript生成的鏈接，您可以簡(jiǎn)單地將href屬性設(shè)置為"#",并且添加 data-rel="back" 屬性, 你也可以調(diào)用對(duì)話框的close() 方法或者編程關(guān)閉對(duì)話框,例如: $('.ui-dialog').dialog('close').
歷史記錄與后退按鈕的行為
由于對(duì)話通常用于在一個(gè)頁(yè)面動(dòng)作，框架不會(huì)在hash歷史中跟蹤對(duì)話框。 這意味著，對(duì)話框不會(huì)在你的瀏覽歷史記錄留下點(diǎn)擊一個(gè)頁(yè)面所應(yīng)產(chǎn)生的效果。 例如，如果你在一個(gè)網(wǎng)頁(yè)中，點(diǎn)擊一個(gè)鏈接打開(kāi)一個(gè)對(duì)話框，關(guān)閉對(duì)話框， 然后導(dǎo)航到另一個(gè)網(wǎng)頁(yè)，如果你此時(shí)點(diǎn)擊瀏覽器的后退按鈕，你將被導(dǎo)航回到***個(gè)頁(yè)面，而不是對(duì)話框。#p#
導(dǎo)航:Ajax, hashes & history
jQuery Mobile 的導(dǎo)航模型
(譯注：jqm的導(dǎo)航模型是jqm的核心所在，由于jqm中區(qū)分了頁(yè)面和page，所以在下文中要注意頁(yè)面和page出現(xiàn)時(shí)所代表的不同意思， 另下文中的“頁(yè)面更改”或者“頁(yè)面變化”大多指的是從當(dāng)前頁(yè)面鏈接到j(luò)qm中的另一個(gè)page。)
在jQuery Mobile里一個(gè)'page'由一個(gè)設(shè)置了data-role="page"屬性的元素構(gòu)成 (通常是div),通常里面包含"header", "content", 和 "footer",每個(gè)部分都可以包含普通的標(biāo)簽,表單和jQuery Mobile的自定義widget.
頁(yè)面載入的基本工作流程如下：首先，用戶對(duì)頁(yè)面發(fā)起一個(gè)正常的HTTP請(qǐng)求， 隨后的'page'會(huì)被插入到當(dāng)前頁(yè)面的DOM當(dāng)中。正因?yàn)槿绱?，DOM每次可能會(huì)有'page'的一個(gè)數(shù)字, 每個(gè)都可以通過(guò)連接到它的data-url 屬性來(lái)重新訪問(wèn)。
當(dāng)一個(gè)URL在初始化請(qǐng)求時(shí)，可能有一個(gè)或多個(gè)“page”在響應(yīng)， 但只有***個(gè)將被顯示。 存儲(chǔ)多個(gè)“page”的優(yōu)勢(shì)是，它可以讓你預(yù)讀有可能被訪問(wèn)靜態(tài)頁(yè)面。
Ajax驅(qū)動(dòng)的頁(yè)面導(dǎo)航
jQuery Mobile中的所有導(dǎo)航都基于 location.hash的更改,只要有可能， 當(dāng)前'page'到下一'page'的更改會(huì)平滑的過(guò)渡,無(wú)論該'page'是引進(jìn)存在于DOM之中還是通過(guò)ajax自動(dòng)的加載的。
hash值會(huì)在***個(gè)"真正"的頁(yè)面被正常完整加載時(shí)創(chuàng)建。hash始終會(huì)被維護(hù)為一個(gè)可用的URL， 所以任何jquery mobile中的 ‘page’都可以被標(biāo)記為書(shū)簽或者引用為一個(gè)鏈接。要獲取非基于hash的URL，簡(jiǎn)單的移除地址中的 #， 并刷新頁(yè)面即可。
一般來(lái)說(shuō)，每當(dāng)jQuery mobile中的一個(gè)鏈接被點(diǎn)擊時(shí)hash會(huì)發(fā)生變化。 當(dāng)鏈接被點(diǎn)擊，jQuery mobile將確保該鏈接是引用一個(gè)本地URL， 如果是這樣，它會(huì)阻止鏈接的默認(rèn)的點(diǎn)擊行為，并通過(guò)Ajax請(qǐng)求引用的網(wǎng)址。 當(dāng)頁(yè)面成功返回，它將location.hash設(shè)置到新的頁(yè)面相關(guān)的URL 。
在框架內(nèi)部，頁(yè)面的改變(已經(jīng)存在于DOM之中或者通過(guò)ajax加載的)使用$.mobile.changePage() 函數(shù)。$.mobile.changePage()包括所有尋找頁(yè)面以及頁(yè)面間切換的邏輯， 和如何處理不同情況下請(qǐng)求的響應(yīng)(比如頁(yè)面沒(méi)找到)。$.mobile.changePage() 可以在外部被調(diào)用，該函數(shù)接受如下的參數(shù)(to, transition, back, changeHash). to參數(shù)可以是一個(gè)string(如文件url或者當(dāng)前頁(yè)面的元素ID)，或是一個(gè)Array (***個(gè)數(shù)組元素為任意你想轉(zhuǎn)自的當(dāng)前頁(yè)面中的page，第二個(gè)元素為轉(zhuǎn)去的頁(yè)面)，或者一個(gè)object(含有如下屬性： url，type(get或post)，和 data(用于序列化的參數(shù)))，后者在加載含有表單數(shù)據(jù)時(shí)的頁(yè)面十分有用，transition 參數(shù)接受一個(gè)string來(lái)表示采用何種過(guò)渡，例如“slide”。 back 參數(shù)接受一個(gè)boolean值， 表示過(guò)渡是否應(yīng)該前進(jìn)或者相反。***，changeHash參數(shù)接受一個(gè)boolean值表示你是否要 根據(jù)一個(gè)成功的頁(yè)面更改來(lái)更新url。
$.mobile.changePage()函數(shù)在jQuery Mobile中很多地方都有用到。舉例來(lái)說(shuō)，當(dāng)一個(gè)鏈接被點(diǎn)擊時(shí)， 它的href屬性是正常的，然后$.mobile.changePage()會(huì)接手剩余的處理。的呢個(gè)表單被提交時(shí)， jQuery Mobile簡(jiǎn)單地手機(jī)表單的屬性，并序列化它的數(shù)據(jù)，然后$.mobile.changePage() 再次接手該次提交并響應(yīng)。 同樣的，創(chuàng)建對(duì)話框的鏈接也是用$.mobile.changePage() 來(lái)打開(kāi)相應(yīng)引用頁(yè) (只是不更新hash以保持對(duì)話框不會(huì)在歷史追蹤記錄里面)。
另一個(gè)jQuery Mobile 頁(yè)面導(dǎo)航模型中的關(guān)鍵要素是 base 元素，該元素被插入到head中， 在每次頁(yè)面變化時(shí)，該元素都會(huì)被修改以確保資源(css，js，圖片等)能正確的被引用和請(qǐng)求。 在不支持動(dòng)態(tài)更新base元素瀏覽器(FF3.6)里，jQuery Mobile遍歷所有頁(yè)面引用的資源并 把它們的href和src加上基地址作為前綴。
hash的更改在一次獨(dú)立的點(diǎn)擊時(shí)發(fā)生，比如一個(gè)用戶點(diǎn)擊后退按鈕，會(huì)通過(guò) hashchange事件進(jìn)行處理， 該事件綁定到window對(duì)象(使用包含在jQuery Mobile中的Ben Alman的特殊事件插件)。當(dāng)一個(gè)hash更改發(fā)生時(shí) (***次頁(yè)面加載時(shí)同樣如此)， hashchange 事件處理程序會(huì)發(fā)送 location.hash 給$.mobile.changePage()函數(shù)， 以加載或者顯示引用的頁(yè)面。
一旦引用的頁(yè)面存在在DOM當(dāng)中了， $.mobile.changePage()函數(shù)會(huì)在當(dāng)前頁(yè)和引用頁(yè)間應(yīng)用一個(gè)過(guò)渡， 以顯示頁(yè)面。頁(yè)面過(guò)渡會(huì)通過(guò)添加和移除指定了css動(dòng)畫的class來(lái)實(shí)現(xiàn)。例如，在一個(gè)向左滑動(dòng)的過(guò)渡效果中， 已經(jīng)存在的頁(yè)面會(huì)被加上 名為 "slideleft" 和 "out" 的class，將要顯示的頁(yè)面會(huì)被加上"slideleft" 和 "in" 的class，同樣還有"ui-page-active" class來(lái)標(biāo)記 新的頁(yè)面正要顯示了。當(dāng)動(dòng)畫完成后，"in" 和 "out" class 會(huì)被移除，而退出的頁(yè)面會(huì)被移除 "ui-page-active" class
開(kāi)發(fā)者必須知道的基地址管理 :
jQuery Mobile使用生成絕對(duì)URL路徑和操作生成的元素的href屬性來(lái)管理http請(qǐng)求。 這兩種途徑的結(jié)合允許我們創(chuàng)建包含完整路徑信息URL來(lái)加載頁(yè)面，base元素將指示資源正確的被加載(css，圖片)。
TODO: update description of internal base and urlHistory objects
自動(dòng)生成的頁(yè)面和子hash url
一些插件可能會(huì)選擇動(dòng)態(tài)折斷頁(yè)面的內(nèi)容為可導(dǎo)航的頁(yè)面，并通過(guò)層次化的鏈接來(lái)訪問(wèn)。Listview插件就是其中一個(gè)例子， 該插件會(huì)折斷一個(gè)嵌套的UL(或OL)為單獨(dú)的頁(yè)面，每個(gè)都被賦予了data-url屬性以便于他們可以在jquery mobile中像其他頁(yè)面一樣 被鏈接。然赫然，為了鏈接到這些頁(yè)面中，生成的頁(yè)面必須首先被請(qǐng)求。因此，被插件自動(dòng)生成的頁(yè)面使用如下特殊的data-url結(jié)構(gòu):<div data-url="page.html&subpageidentifier">
舉例來(lái)說(shuō)，一個(gè)由listview插件生成的頁(yè)面可能會(huì)有一個(gè)像這樣的data-url屬性： data-url="artists.html&ui-page=listview-1"
當(dāng)頁(yè)面被請(qǐng)求時(shí)，jquery mobile 知道在"&ui-page"處要分割 url并使用前面的正確url片段來(lái)發(fā)送一個(gè)HTTP請(qǐng)求。 至于在上文提到的listview例子中，url會(huì)像這樣：http://example.com/artists.html&ui-page=listview-1 ，而jquery mobile則會(huì)請(qǐng)求artists.html，然后會(huì)生成它的子頁(yè)面并顯示(創(chuàng)建一個(gè)data-url="artists.html&ui-page=listview-1"的div)。
請(qǐng)注意，元素的data-url的屬性包含完整的URL路徑，而不僅僅是&ui-page=后的片段。這允許jquery mobile使用 一個(gè)一致的機(jī)制來(lái)為頁(yè)面的data-url屬性匹配URL。
不使用ajax導(dǎo)航的情況
在某些情況下，正常的HTTP請(qǐng)求將被用來(lái)代替Ajax請(qǐng)求。一個(gè)情況就是當(dāng)鏈接到外部網(wǎng)站時(shí)。 你可以使用如下屬性指定一個(gè)正常的HTTP請(qǐng)求：
rel=external
target (任何值都可以，如 "_blank")
表單提交
導(dǎo)航模型同樣會(huì)自動(dòng)處理表單提交。更多細(xì)節(jié)請(qǐng)閱讀表單章節(jié)。
已知的限制
在非標(biāo)準(zhǔn)環(huán)境下由jquery mobile創(chuàng)建的頁(yè)面導(dǎo)航模型在一些條件下會(huì)出現(xiàn)一些限制需要你注意：
當(dāng)鏈接至一個(gè)目錄地址時(shí)(比如用 href="typesofcats/"來(lái)替代 href="typesofcats/index.html"), 你必須提供一個(gè)后置 斜杠.這是因?yàn)閖Query Mobile假定在url中***一個(gè)"/" 后面的部分是一個(gè)文件名,jQuery Mobile會(huì)移除該部分,以便 在未來(lái)有頁(yè)面被引用時(shí)創(chuàng)建基地址.
任何在jQuery Mobile驅(qū)動(dòng)的頁(yè)面中，唯一的資源引用都會(huì)放置在‘page’元素中(data-role="page")。 例如，樣式表和腳本的鏈接可以在div內(nèi)被引用并指定應(yīng)用于相應(yīng)的頁(yè)面。然而， 更好的途徑是在頁(yè)面加載時(shí)用jquery mobile的頁(yè)面事件來(lái)觸發(fā)指定的 腳本。注: 你可以從服務(wù)器返回一個(gè)已經(jīng)在標(biāo)簽中指定了data-url屬性的頁(yè)面， jQuery Mobile會(huì)利用此來(lái)更新hash。這可以使你確保帶有斜杠的目錄路徑解析正確，因此也可以用于未來(lái)請(qǐng)求所需的基地址。
相反地，任何非唯一的資源(全局資源)應(yīng)該在標(biāo)簽中被引用， 或者至少在‘page’元素外面，以防止腳本重復(fù)運(yùn)行。
"ui-page"關(guān)鍵詞用于子hash的rul引用，可以設(shè)置為任何你喜歡的值，以便配合你自己的URL結(jié)構(gòu)。 該值存儲(chǔ)于 jQuery.mobile.subPageUrlKey中。#p#
鏈接格式示例
頁(yè)面主題化
jQuery Mobile 擁有一個(gè)豐富的 主題化系統(tǒng)， 讓你可以完全控制如何顯示一個(gè)頁(yè)面的樣式。每個(gè)頁(yè)面部件(widget)都有詳細(xì)文檔可以參考， 但是讓我們先來(lái)看看一些高級(jí)別的例子來(lái)理解主題化是如何應(yīng)用的。
data-theme 屬性可以用在header和footer中， 用任意字母來(lái)應(yīng)用相應(yīng)的主題調(diào)板。盡管 data-theme屬性可以被添加到內(nèi)容容器中， 但是我們建議你把它添加到被分配了data-role="page"屬性的 div 或者容器中， 以確保背景色會(huì)在整個(gè)頁(yè)面中應(yīng)用。
默認(rèn)的主題樣式從多個(gè)調(diào)板種混搭得到，以創(chuàng)建視覺(jué)上的清晰感和高對(duì)比度感：
(譯注：以下為jQM內(nèi)置主題的展示，故不翻譯,大家可以到j(luò)QM官網(wǎng)去看)
