jQuery Mobile 安裝
在你的網頁中新增 jQuery Mobile
你可以通過以下幾種方式將jQuery Mobile新增到你的網頁中:
- 從 CDN 中載入 jQuery Mobile (推薦)
- 從jQuerymobile.com 下載 jQuery Mobile庫
從 CDN 中載入 jQuery Mobile
CDN的全稱是Content Delivery Network,即內容分發網路。其基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。. |
使用 jQuery 核心, 你不需要在電腦上安裝任何東西; 你僅僅需要在你的網頁中載入以下層疊樣式 (.css) 和 JavaScript 庫 (.js) 就能夠使用 jQuery Mobile:
jQuery Mobile CDN:
<head>
<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href=https://www.itread01.com/jquerymobile/"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://code.jquery.com/jquery-1.11.3.min.js">
<!-- 引入 jQuery Mobile 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</head>
<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href=https://www.itread01.com/jquerymobile/"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://code.jquery.com/jquery-1.11.3.min.js">
<!-- 引入 jQuery Mobile 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</head>
嘗試一下 »
國內使用者推薦使用百度CDN:
jQuery Mobile CDN(百度):
<head>
<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href=https://www.itread01.com/jquerymobile/"http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">
<!-- 引入 jQuery Mobile 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">
</head>
<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href=https://www.itread01.com/jquerymobile/"http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">
<!-- 引入 jQuery Mobile 庫 -->
<script src=https://www.itread01.com/jquerymobile/"http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">
</head>
嘗試一下 »
本教程引用的庫為百度 CDN 資源庫。
下載 jQuery Mobile
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.itread01.com/jquerymobile/jquery.mobile-1.4.5.css"> <script src="https://www.itread01.com/jquerymobile/jquery.js"></script> <script src="https://www.itread01.com/jquerymobile/jquery.mobile-1.4.5.js"></script> </head>
提示: 將下載的檔案放置於與網頁同一目錄下。
你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ? 在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設指令碼語言! |