jquery mobile基本结构搭建

官网：http://jquerymobile.com/

基本结构：

下载安装包后，引入需要的文件，

页面基本结构（单页模板结构）

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5 <title>Page Title</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1">
 7 <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
 8 <script src="http://code.jquery.com/jquery-[version].min.js"></script>
 9 <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
10 </head>
11 <body>
12 <div data-role="page">
13 
14     <div data-role="header">
15         <h1>Page Title</h1>
16     </div><!-- /开头 -->
17 
18     <div role="main" class="ui-content">
19         <p>Page content goes here.</p>
20     </div><!-- /内容部分 -->
21 
22     <div data-role="footer">
23         <h4>Page Footer</h4>
24     </div><!-- /页脚 -->
25 </div><!-- /page -->
26 </body>
27 </html>

 

页面基本结构（多页模板结构）

一个HTML文档可以包含多个“页面”,加载在一起通过叠加多个div data-role 的 “页面” 。 每个“页面”块需要一个惟一的id( id = " foo " ),将用于内部链接之间的“页面”( href = " # foo” )。 当单击链接,该框架将寻找一个内部与id和过渡到“页面”视图。

这是一个两个“页面”网站由两个jQuery移动div导航链接到一个id放在每一页包装。 请注意,页面上的ids包装只需要支持页面的内部链接,和是可选的,如果每一页是一个单独的HTML文档。 这就是两页内的样子 身体 元素。 

 1 <body>
 2 
 3 <!-- Start of first page -->
 4 <div data-role="page" id="foo">
 5 
 6     <div data-role="header">
 7         <h1>Foo</h1>
 8     </div><!-- /header -->
 9 
10     <div role="main" class="ui-content">
11         <p>I'm first in the source order so I'm shown as the page.</p>
12         <p>View internal page called <a href="#bar">bar</a></p>
13     </div><!-- /content -->
14 
15     <div data-role="footer">
16         <h4>Page Footer</h4>
17     </div><!-- /footer -->
18 </div><!-- /page -->
19 
20 <!-- Start of second page -->
21 <div data-role="page" id="bar">
22 
23     <div data-role="header">
24         <h1>Bar</h1>
25     </div><!-- /header -->
26 
27     <div role="main" class="ui-content">
28         <p>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.</p>
29         <p><a href="#foo">Back to foo</a></p>
30     </div><!-- /content -->
31 
32     <div data-role="footer">
33         <h4>Page Footer</h4>
34     </div><!-- /footer -->
35 </div><!-- /page -->
36 </body>
注：基本标签：data-role="page"每个页面包含在此标签内；
1 <div data-role="page">
2     ...
3 </div>

页面容器结构

 

1 <div data-role="page">
2     <div data-role="header">...</div>
3     <div role="main" class="ui-content">...</div>
4     <div data-role="footer">...</div>
5 </div>
posted @ 2016-03-09 16:59  =DLSS=webZT  阅读(378)  评论(0)  编辑  收藏  举报