Jquery Mobile的導航模型 Jquery Mobile's navigation model · jQuery Mobile 中文文檔 A4

# Jquery Mobile的導航模型 Jquery Mobile's navigation model 在Jquery Mobile中，一個頁面"就是一個data-role屬性被設為"page"的容器，通常為div容器，里面包含了"header", "content",“footer"三個容器，各自可以容納普通的html元素，表單和自定義的Jquery Mobile組件頁面載入的基本工作流程如下：首先一個頁面通過正常的http請求到，然后”page"容器被請求，插入到頁面的dom當中。所以dom文檔中可能同時有多個"page"容器，每一個都可以通過鏈接到他們的data-url被訪問到當一個url被初始化請求，可能會有一個或多個"page"在相應，而只有第一個被顯示。存儲多個“page"的好處在于可以使你預讀有可能被訪問的靜態頁面 ## Ajax驅動的頁面導航 Ajax-driven page navigation Jquery Mobile中所有的導航都是基于location.hash的改變和更新實現的。當可實施時，頁面的轉變都會在當前頁面與下一個頁面間使用平滑的轉場效果，不管它已經在當前的dom文檔中，還是自動通過ajax讀取的 Jquery Mobile會在第一個”真正"的頁面加載完畢時創建哈希值，其值為相對于url的完整路徑，hash值始終會被維護為一個可用的URL?所以Jquery Mobile中任何的 'page'容器都可以添加到收藏夾或者引用為一個鏈接。要獲取非基于hash的URL，只要刪除地址中的“#”并刷新頁面即可通常，Jquery Mobile中，任何鏈接被點擊都會造成hash值的變化。當鏈接被點擊時。Jquery mobile將確保該鏈接是引用一個本地URL，如果是這樣，它會阻止鏈接的默認的點擊行為，并通過Ajax請求引用的網址,當頁面成功返回，它將location.hash設置到新的頁面相對的URL 在框架中，頁面的改變，包括已經存在于DOM之中得頁面轉變和需要通過ajax加載的頁面轉變，都是使用$.mobile.changePage() 函數 $.mobile.changePage()包括所有尋找頁面以及頁面間切換的邏輯,以及如何處理不同情況下請求的響應. $.mobile.changePage()函數可以在外部被調用，該函數接受如下的參熟 to, transition, back, changeHash. to參數可以是一個字符串（比如文件url或者當前頁面的元素ID值或是一個數組（第一個數組元素為任意你想轉自的當前頁面中的page，第二個元素為轉去的頁面），或者一個對象（含有如下屬性： url，type（get或post），data（用于序列化的參數）），后者在加載含有表單數據時的頁面十分有用，transition 參數接受一個字符串來表示采用何種轉場效果，例如"slide"?back參數接受一個布爾值，表示轉場應該前進還是相反。最后，changeHash參數接受一個布爾值表示你是否?根據一個成功的頁面更改來更新url $.mobile.changePage()函數在Jquery Mobile中很多地方都有用到。例如，當一個鏈接被點擊時，它的href屬性被解析，然?.mobile.changePage()會處理。當表單被提交時，Jquery Mobile手機一部分表單的屬性，將數據序列化，然后.mobile.changePage() 再次接手該次提交并響應同樣的，創建對話框的鏈接也是由.mobile.changePage() 來打開相應引用頁，但是不更新哈希值，使對話框不會在歷史記錄中另一個Jquery Mobile頁面導航模型中的關鍵要素是base元素,它被插入到head中，在每次頁面變化時，該元素都會被修改以確保資源（css，js，圖片等）都能夠從正確的地址取到。在不支持動態更新base元素的瀏覽器（FF3.6）里，Jquery Mobile會遍歷所有頁面引用的資源并把它們的href和src加上基地址作為前綴哈希值會在一次獨立的點擊時發生時變化，比如一個用戶點擊后退按鈕，會通過 hashchange事件進行處理，該事件通過Jquery Mobile的哈希值改變的特殊事件插件（作者Ben Alman）綁定到window對象。當一個哈希值更改是，或者第一次頁面加載時 hashchange 事件處理程序會發 location.hash.mobile.changePage()函數，以加載或者顯示引用的頁面引用的頁面存在DOM當中之后 .mobile.changePage()函數會在當前頁和引用頁間應用一個轉場，以顯示頁面。頁面轉場會通過添加和移除指定了css動畫的class來實現。例如，在一個向左滑動的轉場效果中，已經存在的頁面會被加一個名為 "slideleft""out" 的class，將要顯示的頁面會被加上 "slideleft" 為"in" 的class。動畫結束后,"in"”out"的class 被刪除，退出的頁面"ui-page-active"的class被刪 ## base url 管理解釋 Developer explanation of base url management: Jquery Mobile使用 1生成的絕對URL地址，2操作生成<base>元素的href屬性的兩種辦法的結合管理http請求,這兩種方法的結合允許我們創建包含完整路徑信息URL來加載頁面，base元素將指示資源正確的被加載（比如圖片和樣式表） ## 自動生成的頁面和子哈希表 Auto-generated pages and sub-hash urls 一些Jquery Mobile的控件可能會根據情況動態地把一個頁面的內容分離為多個可導航的頁面，并通過層次化的鏈接來訪問。比如說list控件，他會把一個嵌套的列表(ul或者ol)分離為多個頁面，每一個頁面賦予一個data-url屬性，可以想正常的"page"頁面一樣被鏈接到。但是為了鏈接到這些頁面，生成他們的源頁面必須首先從服務器請求到，所以通過自動生成的頁面會應用這樣的特殊data-url結構: ``` <div data-url="page.html&subpageidentifier"> ``` 所以例如通過列表控件生成的一個頁面會擁有這樣的data-url屬性： data-url="artists.html&ui-page=listview-1 一個頁面被請求到后，Jquery Mobile會在&ui-page處拆開url地址，使得http請求的是artists.html。在這個例子中，url應該為：http://example.com/artists.html&ui-page=listview-1 而Jquery Mobile會請求： artists.html，然后他會生成子頁面，創建div容器標記 data-url="artists.html&ui-page=listview-1"的屬性，最后作為活動頁面顯示注意，元素data-url屬性包含的是完整的url路徑，而不僅僅是&ui-page=之后的部分。這樣Jquery Mobile就可以通過一個一致的機制來為頁面的data-url屬性匹配URL ## 不使用ajax導航的情況 Cases when Ajax navigation will not be used 有時我們要用正常的http請求而不用Ajax請求，比如鏈接到別的網站的情況。通過給鏈接加下面的屬性，可以將鏈接指定為正常的http請求: ``` rel=external target (打開規則, 例如"_blank") ``` ## 表單的提交 Form submissions Jquery Mobile也會自動通過導航模型處理表單的提交。更多細節請閱讀表單章節: ## 已知的限制 Known limitations 當某鏈接指向的是一個不帶文件名的目錄時,比如href="typesofcats/" 而不是href="typesofcats/index.html"),路徑后必須加一個反斜杠("/")。因為Jquery Mobile會假定url里最后一個反斜杠后面的部分為文件名，從將來的引用到的頁面創建基地址時會刪除掉這個文件名在jqmoible驅動的網站中，頁面內所有指向唯一資源的引用都需要放在“page"容器內（擁有data-role=page屬性的容器）例如，指向針對某一個頁面的樣式表和js的鏈接可放在div中。但是我們推薦使用Jquery Mobile的page事件來當該頁面加載完成時觸發特定的腳本執行 ; 你可以從服務器返回一個已經在標簽中指定了data-url屬性的頁面,Jquery Mobile會利用此來更新hash。這可以使你確保帶有斜杠的目錄路徑解析正確，因此也可以用于未來請求所需的基地址. 而相反的，所有非唯一的資源（全局資源）應該在html文檔<head>標簽中被引用,或者至少在'page'元素外面，以防止腳本重復運行. "ui-page"詞名用于子hash值的url引用，可以設置為任何你喜歡的值，以便配合你自己的URL結構，該值存儲于 Jquery.mobile.subPageUrlKey中