页面结构 Anatomy of a Page
移动网站页面结构Mobile page structure
HTML 代码:
<!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.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>
Viewport的meta标签
<meta name="viewport" content="width=device-width, initial-scale=1">
在body内:pages
<div data-role="page"> ... </div>
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
一个完整的独立页面实例: Complete single page template
html 代码:
<!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.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><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
外部页面的链接 External page linking
多个页面的模板结构 Multi-page template structure
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<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><!-- /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">
<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><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
一些约定,不是要求 Conventions, not requirements
尽管上述的页面结构是通过jQuery Mobile构建移动网站的标准格式,但是jqm框架 是一个灵活的框架。page, header, content, and footer和data-role元素都是可 选的。 page 容器用来进行页面初始化,但是现在的版本对于单独的page 文档也不 是必须的。对于一个自定义布局的页面,所有的这些结构元素都可以没有,但是基 于AJAX的导航和组件都必须在标准的结构中才能工作。如果页面没有page 容器, jqm会自动插入一个,因为需要这样一个容器来管理页面,但是基本的标记现在可以 写的非常简单了。
注意:在多PAGE的结构中,你在页面必须要有多个page标签的容器。