页面 · 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