Latest web development tutorials

jQuery Mobile 安裝

在你的網頁中添加jQuery Mobile

你可以通過以下幾種方式將jQuery Mobile添加到你的網頁中：

  • 從CDN 中加載jQuery Mobile (推薦)
  • 從jQuerymobile.com 下載jQuery Mobile庫

從CDN 中加載jQuery Mobile

lamp 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="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>

</head>

嘗試一下»

國內用戶推薦使用百度CDN：

jQuery Mobile CDN(百度):

<head>

<!-- meta使用viewport以確保頁面可自由縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入jQuery Mobile 樣式-->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入jQuery 庫-->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- 引入jQuery Mobile 庫-->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

嘗試一下»

本教程引用的庫為百度CDN 資源庫。


下載jQuery Mobile

如果你想將jQuery Mobile放於你的主機中,你可以從jQuerymobile.com下載該文件。 

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

提示：將下載的文件放置於與網頁同一目錄下。

lamp你是否想知道為什麼在<script>標籤中沒有插入type="text/javascript" ?

在HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是HTML5 的默認腳本語言！