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(基本)三个等级。