jquery mobile 第一课
题记：项目中需要，废话不多说，写下此系列文章，以备不时之需。
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 -->
