jquerymobile入门（文件引用+多页面）

一：文件引用：

二：pages

在<body>标签内，移动网站的每一个视图或者“page”都要通过 data-role="page" 属性的标签来定义。

在page容器内，任何有效的html标签都可以使用，但是对于Jquery Mobile的典型页面来说，page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器。

</div>

多个页面的模板结构 Multi-page template structure

一个独立的html文件可以包含多个“pages”,在加载的时候这些data-role="page" 的div会一起堆栈加载。每一个page区块需要由一个独特的ID(id="foo")标记，通过给内部链接地址定义为(herf="#foo"),互相跳转。当连接被点击时，JQmoblie会在文档内寻找带有ID的page容器，然后通过页面转场显示。

代码：

 1 <!-- Start of first page -->
 2 <div data-role="page" id="foo">
 3 　　　<div data-role="header">
 4 　　　　　<h1>Foo</h1>
 5 　　　</div><!-- /header -->
 6 　　　<div data-role="content"> 
 7 　　　　　<p>I'm first in the source order so I'm shown as the page.</p> 
 8 　　　　　<p>View internal page called <a href="#bar">bar</a></p>
 9         <p>View internal page called <a href="#dada">dada</a></p> 
10 　　</div><!-- /content -->
11 　　<div data-role="footer">
12 　　　　<h4>Page Footer</h4>
13 　　</div><!-- /footer -->
14 　　</div><!-- /page -->
15 <!-- Start of second page -->
16 　　<div data-role="page" id="bar">
17 　　<div data-role="header">
18 　　　<h1>Bar</h1>
19 　</div><!-- /header -->
20 　　<div data-role="content"> 
21 　　　<p>I'm first in the source order so I'm shown as the page.</p> 
22 　　　<p><a href="#foo">Back to foo</a></p>
23     <p>View internal page called <a href="#dada">dada</a></p> 
24 　</div><!-- /content -->
25 　<div data-role="footer">
26 　　<h4>Page Footer</h4>
27 　</div><!-- /footer -->
28 　</div><!-- /page -->
29 <!-- Start of third page -->
30 　　<div data-role="page" id="dada">
31 　　<div data-role="header">
32 　　　<h1>Imdada</h1>
33 　</div><!-- /header -->
34 　　<div data-role="content"> 
35 　　　<p>I'm dada,third page.xixi.</p> 
36 　　　<p><a href="#foo">Back to foo</a></p> 
37 　　　<p><a href="#bar">Back to bar</a></p> 
38 　</div><!-- /content -->
39 　<div data-role="footer">
40 　　<h4>Page Footer</h4>
41 　</div><!-- /footer -->
42 　</div><!-- /page -->

上面的代码是三个页面的。

demo：

单页面多页面