Jquery Mobile"page"结构是优化的用于支持单页面和在一个页面中本身内部(local internal)的链接页。
mobile page structure手机页面结构：
一个Jquery mobile页面必需一HTML5的'doctype'开头，以充分利用此框架的所有特性。
基本页面如下：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>
注意到<head>中的viewport的meta标签了吗？
设置
content="width=device-width, initial-scale=1"
可以让页面的宽度保证是设备的像素宽。
在<body>标签的内部。
每一个视图。或'page'在手机设备用一个带data-role="page"的属性的DIV来标识。
<div data-role="page">
...
</div>
在"page"容器中可以使用任何有效的HTML标签。
但是一个典型的jquery mobile页面中。
"page"的直接子元素是拥有data-role为"header","content"和"footer"的DIV标签。
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Multi-page template structure多页面的模板结构
一个HTML文档可以包含多个"page"。
每一个'page'需要一个唯一的"id"(id="foo")。用来在'page'中导航(href="#foo")
当一个链接点击时，jquery-mobile框架会寻找一个带有相应ID的页面。并将其转换为一个视图(view)。
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
I'm first in the source order so I'm shown as the page.
View internal page called [url=#bar]bar[/url]
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.
[url=#foo]Back to foo[/url]
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
运行后得图：
其一：
其二：
[img]
http://banxi1988.iteye.com/upload/picture/pic/104670/bda08fd3-ea25-3743-8ba4-b51e6131ded2.png
[/img]
jquery-mobile页面的基本分解就到这里了。
想知道更多前看官方文档：
http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html
PS:下面根据这个分解所涉及的知识点再多翻译点相关的在这里：
一：关于页的标题(Page title)
1. Ajax导航中的标题
当你基于加载jQuery Mobile网站的第一个页面的时候，然后点击或者提交一个表单。
在获得所请求页面的时候利用了Ajax。在同一个DOM下包含这两个页面对于页面切换动画是必要的。但是这种方法的一个不好的地方就是页面的标题一直是第一个页面的标题。而不是你所浏览页面的标题。
为了解决这个问题，jQuery Mobile自动将页面的标题通过Ajax转换同时改变父文档的标题属性来适应。
2. 多页面模板下的标题
对于多模板文档，我们遵守相似的约定。但是因为所以的页面都共享同一个标题。我们为每一个page容器都设置了一个data-title属性来手动设置一个标题。html文档的标题会自动根据当前浏览的页面自动调整。
如下所示：
[code=html]
<div data-role="page" id="foo" data-title="Page Foo">
</div><!-- /page -->
分享到：
相关推荐
用jquerymobile开发时，两个页面间跳转往往需要传递参数，此文档是代码示例
Jquery Mobile中的按钮,学习Jquery Mobile中的简单Jquery Mobile
本资源以Hello Word为例，里面包含了jQuery Mobile框架所需要的部署文件。
3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。 4.通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容...
资源名称：jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介：《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库，从...
jQuery mobile相册的一种样式
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框
jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和桌面设备上都可以访问的响应网站和应用。...
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者，可以从中学习JQuery Mobile的所有接口与组件的功能，同时通过范例进行练习；对于JQuery Mobile开发人员...
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。 lamp 不同设备使用了...
第2~5章分别讲解了jQuery Mobile的页面与对话框、工具栏与格式化内容、页面常用组件、主题等基础知识；第6章和第7章分别详细介绍了jQuery Mobile的插件和API；第8章探讨了jQuery Mobile的开发技巧与最佳实践；第9...
作为jQuery Mobile的入门级读物，《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性，内容系统全面，便于理解。 《jQuery Mobile快速入门》总共分为10章，内容包括jQuery Mobile的基础...
jQuery Mobile快速入门.pdf
jQuery mobile滑动式的标题导航
jQuery Mobile是jQuery在手机和平板设备上的版本，用于创建针对智能手机和平板电脑的跨设备Web应用。 jQuery Mobile旨在“为jQuery社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。jQuery Mobile...
jquerymobile是用于创建移动 Web 应用的前端开发框架，此资源包含了几套jquerymobile的模板，供新手学习。
jquery mobile 1.4.1版 移动开发必备
jquerymobile例子 包含从登陆到菜单和各种菜单切换完整设计 上传只为分享
jquery mobile中文手册，详细介绍了jquery mobile的相关知识。