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..........