代码改变世界

Introduction to jQuery Mobile

2013-02-04 22:18  lefan  阅读(283)  评论(0)  编辑  收藏  举报

Create a basic page template

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <title>My Page</title> 
 5     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 6     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 7     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 8     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
 9 </head> 
10 <body> 
11 
12 <div data-role="page">
13 
14     <div data-role="header">
15         <h1>My Title</h1>
16     </div><!-- /header -->
17 
18     <div data-role="content">    
19         <p>Hello world</p>        
20     </div><!-- /content -->
21 
22 </div><!-- /page -->
23 
24 </body>
25 </html>

demo:

 

 

Make a listview

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

Add a slider

1 <form>
2    <label for="slider-0">Input slider:</label>
3    <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />
4 </form>

Make a button

<a href="#" data-role="button" data-icon="star">Star button</a>

 各个系统对jQueryMobile支持

在2010年9月，jQuery的作者John Resig透露了一张jQueryMobile对各种设备/系统的支持表格（见下）。对于每个系统来说，jQueryMobile将他们的支持情况分为A（好），B（一般），C（基本）三个等级。