[翻译介绍]jquerymobile页面(page)分解

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>


运行后得图:
其一:
[翻译介绍]jquerymobile页面(page)分解

其二:
[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 -->
























你可能感兴趣的:(android,html5,jquerymobile)