一、下載jQuery Mobile
下載網址:http://jquerymobile.com/
點選Download
下載如下zip包
解目錄圖圖:
點擊index.html進入demo主頁,這裡面有許多範例。
二、創建JQuery Mobile的Helloword
1、創建demo
2、新建後站點
3、站點建立成功後站點建立成功後將產生的de html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>第 1 页</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">第 2 页</a></li> <li><a href="#page3">第 3 页</a></li> <li><a href="#page4">第 4 页</a></li> </ul> </div> <div data-role="footer"> <h4>页面脚注</h4> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>第 2 页</h1> </div> <div data-role="content"> 内容 </div> <div data-role="footer"> <h4>页面脚注</h4> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>第 3 页</h1> </div> <div data-role="content"> 内容 </div> <div data-role="footer"> <h4>页面脚注</h4> </div> </div> <div data-role="page" id="page4"> <div data-role="header"> <h1>第 4 页</h1> </div> <div data-role="content"> 内容 </div> <div data-role="footer"> <h4>页面脚注</h4> </div> </div> </body> </html>
在Chrome瀏覽器中運行結果:
打包成apk在真實手機上的效果如下:
兩個demonet/detailload. /lxq_xsyu/6865877
以上就是 小強的HTML5行動開發之路(23)- jQuery Mobile入門的內容,更多相關內容請關注PHP中文網(www.php.cn)!