jQuery Mobile 是jQuery 在手机上和平板设备上的版本
先看效果
1、page
在苹果浏览器Safari上Page的效果
代码如下：
<!DOCTYPE html> <html> <head> <title>Jquery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="scripts/jquerymobile/jquery.mobile-1.1.0.min.css" type="text/css" charset="utf-8" /> <script type="text/javascript" charset="utf-8" src="scripts/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script> <script src="scripts/jquerymobile/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="main.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div>
</div> </body> </html>
data-role是自定义属性，HTML5支持自定义属性，只要使用以’data-’开头，后面加上任意字符即可定义一个自定义属性。
2、listView
代码：
<!DOCTYPE html> <html> <head> <title>Jquery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="scripts/jquerymobile/jquery.mobile-1.1.0.min.css" type="text/css" charset="utf-8" /> <script type="text/javascript" charset="utf-8" src="scripts/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script> <script src="scripts/jquerymobile/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="main.js"></script> </head> <body> <ul data-role="listview" data-inset="true" data-filter="false"> <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> </body> </html>
Done! So easy.......
以如此少的Html代码实现了在手机应用上布局和列表显示
在FireFox、Chrome、Safari都可以看到如此的效果
IE不支持.....Fuck the IE..........