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 -->
分享到：
相关推荐
在HTML5中，jQuery Mobile利用数据属性（data-attributes）来标识和配置UI元素，如`data-role="page"`定义一个页面容器，`data-role="header"`定义页眉，`data-role="content"`定义主要内容区域，`data-role="footer...
### JqueryMobile页面间跳转时的参数传递 在使用jQuery Mobile进行移动Web应用开发时，经常需要在不同页面之间传递参数。这种功能对于实现页面之间的数据交互至关重要。本文档将通过一个具体的代码示例来详细说明...
同时，jQuery Mobile 的数据属性如`data-role="page"`和`data-theme`可以调整页面和元素的外观。 2. **菜单系统构建** 菜单在移动应用中扮演着重要的角色。jQuery Mobile 的`<div data-role="navbar">`元素是创建...
2. **页面容器（Page Container）**：所有 jQuery Mobile 页面都必须包含在一个 `data-role="page"` 的 div 中，这是页面的基本单元。 3. **导航结构（Navigation Structure）**：使用 `data-rel` 属性创建链接间的...
这个文件中，jQuery Mobile将DOM元素转换为可触摸的交互元素，并提供了一系列API和方法，如`.page()`用于初始化页面，`.changePage()`用于页面间的切换。此外，还有一系列用于事件绑定和组件创建的函数。 对于页面...
2. **相册容器**：创建一个用于显示相册的容器，例如使用`<div>`元素，并赋予它一个特定的数据-角色，如"data-role='content'"，这是jQuery Mobile页面的主要内容区域。 3. **图片列表**：将每张图片包装在一个链接...
每个图片都会放在一个独立的`<div>`中，用`data-role="page"`来指定它是jQuery Mobile的一个页面。`<a>`标签包裹着图片，作为可点击的元素，`<img>`标签则用来显示图片。 2. **CSS样式**：接着，我们需要编写CSS...
2. **自动页面导航**：通过数据-URL（data-url）属性和页面容器，jQuery Mobile可以自动管理页面的加载和切换，实现平滑的页面过渡效果。 3. **可定制的主题系统**：jQuery Mobile提供了一套主题引擎，允许开发者...
在《jQuery Mobile Develop and Design》中，作者不仅介绍了框架的细节，还提供了一个实际和愉快的叙述方式，帮助读者快速上手，并准备好创建一些优秀的作品。书中还包含了以下几方面的内容： - 易于理解的逐步指导...
jQuery Mobile 提供了多种事件来监听页面的生命周期，比如`pagebeforeshow`和`pageshow`，可以用于在页面显示前或显示后执行某些操作。例如，我们可以使用`pageinit`事件初始化滑动式标题导航： ```javascript $...
jQuery Mobile 需要特定的页面结构来工作，通常包括一个或多个 `<div data-role="page">` 容器。每个页面容器代表应用的一个独立视图。页面间可以通过链接或程序控制进行导航。 ### 四、页面初始化和动态加载 ...
3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。 4.通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容...
3. **页面结构**：jQuery Mobile使用特殊的HTML结构来组织内容，每个页面由一个`<div data-role="page">`元素包裹，内部可以包含多个区域，如头部`<div data-role="header">`、内容区`<div data-role="content">`和...
### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**：jQuery Mobile 是一款流行的...通过本文的介绍，希望能够帮助读者更好地理解和掌握 jQuery Mobile 的基础知识及实际应用场景。
首先，jQuery Mobile 的核心是其“页面模型”（Page Model），它将网页拆分为多个独立的“页面”，每个页面都可以作为一个单独的HTML片段存在。这种设计使得在移动设备上导航更为流畅，因为只需加载所需的部分内容，...
最后，`jquery.mobile.structure-1.4.1.css`是一个关键文件，它定义了jQuery Mobile的页面结构和布局规则，包括页头、页脚、内容区域等元素的样式，确保了页面在不同屏幕尺寸下的适应性。 jQuery Mobile 1.4.1版的...
1. **基础概念**：介绍如何设置HTML文档结构，引入jQuery Mobile库，并理解页面和页面容器的概念。 2. **页面导航**：展示如何使用链接进行页面间导航，以及如何处理多页布局。 3. **触控事件**：包含使用触控事件...
2. **页面结构**：jQuery Mobile 通过页面容器（page container）和页面元素（page element）组织内容。每个页面元素都是独立的，可以通过 AJAX 动态加载。 3. **主题（Theming）**：jQuery Mobile 提供了一套可...
访问 jQuery Mobile 官方网站 (https://jquerymobile.com/)，在下载页面中可以选择适合项目的版本进行下载。 **使用 npm 安装：** 如果你的项目已经集成了 npm，可以直接使用以下命令来安装 jQuery Mobile： ```...