[翻译介绍]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请求失败，框架会显示一条小的错误信息--几秒之后会消失，所以并不会中断导流。更多请查看一个(错误消息示例)

   注意：你并不能通过Ajax导航活动链接到多页面文档,因为框架将只会加载它发现的第一个页面，而不是整个页面集合。在这种情况下你必要使用无Ajax的链接（参见下一节）来进行一个整个页面的刷新来阻止潜在的hash碰撞。当前这有一个子页面插件来使加载多文档页面成为可能。

三：非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)

  注意：构建一个jQuery Mobile应用程序时，当Ajax导航系统被全局禁用或者单独的链接常常被禁用时，我们推荐禁用$.mobile.pushStateEnabled这个全局配置选项来避免在某些浏览器上不一致的导航效果。

四：多页面文档中的链接(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":
测试链接，这个链接是一个目录并带一个index页面。返回的页面将改变更新hash为"/docs/pages/docs-links-urltest"和一个正斜杆。这个通过在页面源代码中的data-url属性来完成的。记住，这个值将替换整个条目的hash。同时当通过刷新请求时一个URL是实际的解析为一个正确的页面还是一个深度的连接。
了解更多关于导航模型，Ajax和hashes及历史的技术细节在Jquery mobile中。

七：链接示例（Link examples)
  所有标准的HTML的链接类型都被支持，除了上面例举的一些类型。下面是一些常用链接类型的示例：
（译注：示例效果请看原文，下面是示例的代码）
[code=xml]
<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:[e-mail]">Basic email: mailto:[e-mail]</a></li>
<li><a href="mailto:[e-mail]?cc=[e-mail]&bcc=[e-mail]&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