jquerymobile入门(文件引用+多页面)

一:文件引用:

<meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">

      <script src="http://code.jquery.com/jquery-1.5.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

二:pages

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

<div  data-role="page">... </div> 

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

<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文件可以包含多个“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:

单页面   多页面

 

你可能感兴趣的:(jquerymobile)