標籤：asc 分享 src com init 移動 alt middle vertica
jQuery Mobile 是一個適配pc端和移動端的前台開放架構，當然很多時候主要用於移動端的開發。怎樣搭建一個jQuery Mobile的開發環境呢？其實很簡單，我們只需要引入的css、js和images等資源檔即可。
引入這些資源檔有兩個方法:
1.從 CDN 中引入 jQuery Mobile這個方法比較簡單，你只需要引入css和js檔案即可，不需要引入images檔案，它們都已經存放在cdn伺服器上了，當然這樣不好的地方就是你不可以修改圖片或者是js和css檔案了。
<!--jQuery Mobile CDN:-->
<!-- 引入 jQuery Mobile 樣式 --><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 庫 --><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><!-- 引入 jQuery Mobile 庫 --><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--jQuery Mobile CDN(百度):-->2. jQuery Mobile官網下載資源檔
<!-- 引入 jQuery Mobile 樣式 --><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 庫 --><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><!-- 引入 jQuery Mobile 庫 --><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
：http://jquerymobile.com/download/
下載之後得到一個壓縮檔，解壓後選擇我們需要的檔案放到我們的項目中。
<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="jquery.mobile-1.4.5.css"><script src="jquery.js"></script><script src="jquery.mobile-1.4.5.js"></script></head>建立第一個jQuery Mobile頁面
<!DOCTYPE html> <html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>第一個jQuery Mobile Web</title><link href="css/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.min.js" type="text/javascript"></script><script src="js/jquery.mobile-1.0.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">第 1 頁</a></li> <li><a href="#page3">第 2 頁</a></li> <li><a href="#page4">第 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>
(01)建立第一個jQuery Mobile頁面
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
