頁面 · jQuery Mobile 中文文檔 A4

# 頁面 ## 頁面結構 Anatomy of a Page Jquery Mobile中的"頁面"結構已經優化為支持單個的頁面，或者在一個頁面內嵌入的多個“page”。使用這種模型的目的是使WEB開發人員使用最佳實踐創建WEB網站，使得普通的鏈接不需要任何特殊配置就可以工作，而且能創造出富媒體的像本地應用一樣通過標準的http無法創造出的用戶體驗。 ## mobile頁面結構Mobile page structure Jquery Mobile網站必須使用HTML5文檔聲明開始，使得網站能夠適用HTML5的特性（不支持HTML5的舊瀏覽器會靜默地忽略HTML5的文檔聲明和一些自定義屬性）。在head標簽內需要引用Jquery,Jquery Mobile和mobile的主題CSS文件，像如下一樣開始： **HTML 代碼:** ``` <!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> ``` 在body標簽內，移動設備上每一個視圖或者"page"被一個帶有 data-role="page"的容器（通常是div）所標示：: ``` <div data-role="page"> ... </div> ``` 在page容器內，任何有效的html標簽都可以使用，但是對于Jquery Mobile的典型頁面來說，page容器的直接子結點應該為使用"data-role"標記屬性為"header""content"和"footer"的3個容器。 **HTML 代碼:** ``` <div data-role="page"> 　<div data-role="header">...</div> 　 <div data-role="content">...</div> 　 <div data-role="footer">...</div> </div> ``` ## 一個完整的獨立頁面實例:　Complete single page template 集合在一起后，這就是一個標準的Jquery Mobile頁面的樣板了。 **html 代碼:** ``` <!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> 　　　<div data-role="content"> 　　　<p>Page content goes here.</p> 　　</div> 　<div data-role="footer"> 　　<h4>Page Footer</h4> 　</div> 　</div> </body> </html> ``` ## 外部頁面的鏈接　External page linking Jquery Mobile會自動構建AJAX驅動的站點和應用。默認情況下，當你點擊了一個指向外部頁面(比如：products.html)的鏈接，JQmoblie的分析鏈接地址，然后產生一個ajax請求（Hajax）,顯示一個讀取中的提示框。如果AJAX請求成功，新頁面的內容會添加到DOM中，所有MOBILE組件都會自動初始化，所以新的頁面會通過頁面轉場動畫看到。如果AJAX請求失敗，JQmoblie會顯示一個小錯誤提示框（默認的主題為E）,然后過一會就消失了，不會影響你繼續瀏覽。 ## 本地，內部的頁面　Local, internal linked "pages" 一個單獨的HTML文檔內可以包含多個由"data-role="page"標記的DIV容器，他們在加載時共同加載，但是被解釋成不同的頁面（個人認為這是Jquery Mobile的獨到之處），每一個page區塊需要由一個獨特的ID(id="foo")標記，通過給內部鏈接地址定義為(herf="#foo"),互相跳轉。當連接被點擊時，JQmoblie會在文檔內尋找帶有ID的page容器，然后通過頁面轉場顯示。但請注意如果你的移動頁面包括幾個"page",然后通過某個鏈接被一個外部頁面通過AJAX加載，你需要給這個鏈接添加rel="external"和data-ajax="false"的屬性。這樣就告知Jquery Mobile完全地加載一個頁面，清理掉AJAX在URL的哈希值。這是很關鍵的，因為AJAX頁面使用哈希值（"#"）記錄AJAX歷史，但是包含多個PAGE的頁面也是用哈希值指向某個PAGE，所以這樣在哈希值上就會產生沖突。例如：一個指向包含多個內部PAGE頁面的鏈接應該如下： ``` <a href="multipage.html" rel="external">Multi-page link</a> ``` 下面是一個包含2個"PAGE"的頁面，兩個DIV通過ID標記和導航。請注意通過ID標記內部頁面的做法只需要支持內部的頁面鏈接,如果每個頁面是分離的HTML文檔,則屬性可加也可不加。： ``` <body> 　 　<div data-role="page" id="foo"> 　<div data-role="header"> 　　<h1>Foo</h1> 　</div> 　　<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> 　<div data-role="footer"> 　　<h4>Page Footer</h4> 　</div> 　</div> 　　 　<div data-role="page" id="bar"> 　<div data-role="header"> 　　h1>Bar</h1> 　</div> 　<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> 　<div data-role="footer"> 　　<h4>Page Footer</h4> 　</div> 　</div> </body> ``` **請注意**：我們對于所有AJAX的"page"使用的是哈希值來跟蹤導航歷史，所以現在還不可以通過外部頁面的一個ID指向那一個錨點，因為Jquery Mobile會尋找帶有該ID的"page",而不是滾屏到帶有該ID的內容上。 ## 后退鏈接　Back linking 如果你添加了data-rel="back"屬性給某個鏈接，那對于該鏈接的任何點擊行為，都是后退的行為，會無視鏈接的herf，后退到瀏覽器歷史的上一個地址。當想鏈接到一個命名好的頁面，或者要關閉對話框時特別有用。使用這一特性時要注意：務必請使用一個有意義的herf值實際地指向要引用的地址（因為這樣也會讓GRADE-C的瀏覽器也支持這個按鈕）。而且如果你只是要看到一個翻轉的頁面轉場而不是真正的回到上一個歷史記錄的地址，你就要使用data-direction="reverse"屬性，而不是后退按鈕。 ## 后退鏈接　Back linking 如果你添加了data-rel="back"屬性給某個鏈接，那對于該鏈接的任何點擊行為，都是后退的行為，會無視鏈接的herf，后退到瀏覽器歷史的上一個地址。當想鏈接到一個命名好的頁面，或者要關閉對話框時特別有用。使用這一特性時要注意：務必請使用一個有意義的herf值實際地指向要引用的地址（因為這樣也會讓GRADE-C的瀏覽器也支持這個按鈕）。而且如果你只是要看到一個翻轉的頁面轉場而不是真正的回到上一個歷史記錄的地址，你就要使用data-direction="reverse"屬性，而不是后退鏈接。 ## 重定向以及鏈接到目錄　Redirects and linking to directories 當連接到的是一個目錄地址（比如href="typesofcats/"而不是href="typesofcats/index.html"），你必須在地址后面加一個斜杠("/")。因為Jquery Mobile假定最后一個斜杠后的部分為文件名，當接下來引用到的頁面生成基地址的會的時候會刪除它。但是，你可以通過已經指定好的data-url地址來返回到上一個page容器，就可以繞過這一個問題。Jquery Mobile 會使用那個data-url值來更新url，來替代過去請求的那個頁面。這樣你也允許你通過返回url的更改來作為重定向的結果。例如：你想通過post方式提交表單到 /login.html"，但是提交成功以后返回一個url為 "/account 。這個工具就可以讓你在這種情況下控制歷史記錄堆棧。以下是一個實例：有一個鏈接是指向 ?"docs-links-urltest/index.html" ，該鏈接是指向目錄的索引頁，返回的頁面會使用 "docs/pages/docs-links-urltest/" 更新哈希值，這是通過代碼里的 data-url?值完成的。請注意data-url值會替換整個哈希值，由你來把他替換成當刷新或者下層鏈接時URL發出的請求能解析正確的頁面.更多技術細節請參見導航模型Ajax, hashes and history