[翻譯介紹]jquerymobile的頁面連接配接(Linking pages)

一：連結頁(Linking pages)jQuery Mobile設計用來與簡單的頁面連結約定協同工作。 

顯然，你可以連結頁面和資源像你平常那樣，jQuery Moblie會自動處理頁面的請求，以單頁面模型，如果可能的話使用Ajax。當Ajax不能用時（如不是同一個域名下，或者在連結中指定了類似屬性） 将使用正常的http請求。 

   這種模型的目标是允許開發者以最佳實踐來建立網站:沒有配置的原始連結将正常工作，富本地體驗的不通過标準的HTTP請求來獲得。 

二：預設的連結行為：Ajax（Default link behavior:Ajax) 

  為了讓頁面的切換動畫成為可能，是以指向外部頁面的連結将通過Ajax請求來加載。 

為了達到非侵入的效果(To do this unobtrusively)，jQuery Mobile架構将轉換連結的href來建立一個Ajax形式的請求(Hijax)同時顯示一個正在加載的圖示。這些都由jQuery Mobile自動完成。 

  如果Ajax請求成功，新的頁面将添加進DOM中，是以的手機小部件将自動初始化，然後新頁面将以動畫的方式進入視圖。 

三：非Ajax的連結(Linking without Ajax) 

  指向其它域名的連結或者有rel="external"屬性，data-ajax="false"或target屬性将不被通過Ajax加載的連結。這些連結會引起一個完全的頁面重新整理而沒有動畫切換效果。 

兩個屬性(rel="external"和data-ajax="false")都有相同的效果，但是它們的語義不同:rel="external" 應該用于當一個連結指向另一個站點或者域名。而data-ajax="false"用于在你的域名之内一個頁面Ajax加載的選項。出于安全的限制和Ajax的行為這個架構總是選擇連接配接到外部的域名(譯注：這個不太了解，原文：the

framework always opts linkis to external domains out of the Ajax behavior) 

四：多頁面文檔中的連結(Linking within a multi-page document) 

    一個單獨的HTML文檔可以包含一個或多個頁面（'page')容器，有多個以一個屬性data-role的值為"page"的div，這允許你在一個音單獨的HTML文檔中建立一個小站點或者應用。當頁面加載時jQuery Mobile将簡單的顯示在源代碼中發現的第一個'page' 

    如果一個在多頁面文檔中的連結指向一個錨(#foo)，這個架構将查找一個相應ID(id="foo")的頁面。如果在這個HTML文檔中找到了這個頁面，架構将反這個頁面容器轉到視圖。可以在本地實作無縫導航。對于使用者來說内部的頁面('page')和外部的'page'看起來一樣，除了外部的頁面在加載的時候會顯示一個Ajax的加載圖示。兩種情況，架構都将會更新頁面的URL的hash，以便支援後退按鈕，深度連結和書簽。 

    注意：如果你正從一個通過Ajax加載的頁面連結到一個包含多個内部page的頁面的話，你需要為此連結添加一個rel="external"或者data-ajax="false"的屬性。這會通知架構完成一個完全的頁面加載以清除URL中的Ajax hash。

這個限制是因為Ajax頁面通過使用hash(#)來跟蹤Ajax曆史。而一個多内部頁面的頁面使用hash來标明内部頁面。是以在這兩種模式下會存在 沖突。 

例如一個指向多内部頁面的頁面看起來如下： 

[code=xml] 

<a href=multipage.html>Multi-page link</a> 

五：後退按鈕連結("Back" button links) 

       如果你在一個錨上使用屬性data-rel="back" ，錨上的任何點選将會像後退按鈕一樣。傳回一個曆史記錄而忽略錨的預設連結。當使用JavaScript産生'back"後退按鈕時這一點特别有用，例如關閉對話框的按鈕。當在你的源代碼标記中使用這個特性的時候，雖然支援這個屬性的浏覽器将不會使用指定的href屬性。但是還是提供一個有意義的值指向一個引用頁的URL以友善未來支援C類浏覽器。如果使用者能夠通路這個頁面從多個引用頁，指定一個有意義的href以便導航對于使用者依然是本地化的，同時請記住如果你隻是倒置一個轉換而不需要實際的在曆史記錄中後退，你應該使用data-direction="reverse"。 

六：重定向和連結到目錄（Redirects and linking to directories) 

  當連結到一個目錄(例如href="typesofcats/" 而不是href="typeofcats/index.html")，你必要使用一個正斜杆。因為jQuery Mobile假設在URl中最後一個"/"之後的部分字元是一個檔案名，後面頁面引用将會建立删除前面那部分的基本url。 

然後，你能你可以解決這個問題給你的頁面提供一個指定的data-url屬性。當你這樣做的時候，jQuery Mobile将使用那個屬性值來更新URL。而不是用來請求那個頁面的Url。 

這樣允許你傳回作為重定向結果改變的URL。例如你送出一個表單到"/login.html"但是當成功送出之後頁面從url"account"傳回。這個工具允許在這些情況下你控制jQuery Mobile的曆史記錄，下面是一個例子： 

接下來的連結指向"docs-links-urltest/index.html": 

mobile中。 

七：連結示例（Link examples) 

  所有标準的HTML的連結類型都被支援，除了上面例舉的一些類型。下面是一些常用連結類型的示例： 

（譯注：示例效果請看原文，下面是示例的代碼） 

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d"> 

<li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li> 

<li><a href="../../index.html">Link in the same domain</a></li> 

<li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li> 

<li data-role="list-divider">Links that will refresh the page</li> 

<li><a href="http://www.jquery.com">External domain</a></li> 

<li><a href="../../index.html" rel="external">Link with rel="external"</a></li> 

<li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li> 

<li><a href="../../index.html" target="foo">Link with target="foo"</a></li> 

<li data-role="list-divider">Email links</li> 

<li><a href="mailto:[email protected]">Basic email: mailto:[email protected]</a></li> 

<li><a href="mailto:[email protected][email protected]&[email protected]&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and

body pre-filled</a></li> 

<li data-role="list-divider">Phone links</li> 

<li><a href="tel:[phone]">Phone: tel:[phone]</a></li> 

<li data-role="list-divider">Other</li> 

<li><a href="#">A href="#" will return false</a></li> 

</ul> 

原文連結：http://jquerymobile.com/demos/1.0/docs/pages/page-links.html