jquery mobile 第一课

题记：项目中需要，废话不多说，写下此系列文章，以备不时之需。

官方网址:http://jquerymobile.com/

API地址:http://jquerymobile.com/test/docs/api/index.html

demo地址：http://jquerymobile.com/demos/1.0.1/

PS:不喜欢英文的朋友也可以看下国人已经翻译的资料http://www.jqmapi.com

目前最新版本是1.1.1 ,1.2.1 alpha正在构建中

本人使用的是1.0.1版本

直接上代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3  <HEAD>
 4   <TITLE> New Document </TITLE>
 5  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 6   <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
 7 <script src="js/jquery-1.6.4.min.js"></script>
 8 <script src="js/jquery.mobile-1.0.1.min.js"></script>
 9  </HEAD>
10  <BODY>
11   <div data-role="page"> 
12     <div data-role="header">header</div> 
13     <div data-role="content">content</div> 
14     <div data-role="footer">footer</div> 
15 </div> 
16  </BODY>
17 </HTML>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 是为了让显示出来的界面的宽度跟手机设备自身的像素宽度一致，初始规模为1 不设置一些手机默认会将默认宽度设置成900
当然，用户仍然可以手动进行zoom放大界面，特别在IOS平台仍然存在一些BUG,官方也明确表示后续的版本会进一步改进这些BUG
但是不会强制界面大小，因为jquery仅仅只是一个库。

 

运行结果如上图

 

接着来看下<a>用法

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

 

 

 

 

 

 

 

 

 

posted @ 2012-09-04 11:25  draem0507  阅读(241)  评论(0)  编辑  收藏  举报
View Code