jQuery Mobile經典...login
jQuery Mobile經典教程
作者:php.cn  更新時間:2022-04-11 13:58:34

jQuery Mobile 安裝



在你的網頁中加入jQuery Mobile

你可以透過以下幾種方式將jQuery Mobile加入你的網頁:

  • 從CDN 載入jQuery Mobile  (推薦)

  • 從jQuerymobile.com 下載jQuery Mobile庫


#從CDN 中載入jQuery Mobile

lampCDN的全名為Content Delivery Network,也就是內容傳遞網路。其基本想法是盡可能避開網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。 .

使用jQuery 核心, 你不需要在電腦上安裝任何東西; 你只需要在你的網頁中載入以下層疊樣式(.css) 和 JavaScript 庫( .js) 就能夠使用jQuery Mobile:

##實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="content">
  <p>欢迎!</p>
  </div>

  <div data-role="footer">
  <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

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

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="content">
  <p>欢迎!</p>
  </div>

  <div data-role="footer">
  <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

執行實例»點擊"運行實例" 按鈕查看線上實例

本教學引用的庫為百度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 的預設腳本語言!