在你的網(wǎng)頁中添加 jQuery Mobile

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

  • 從 CDN 中加載 jQuery Mobile  (推薦)

  • 從jQuerymobile.com 下載 jQuery Mobile庫

從 CDN 中加載 jQuery Mobile

lampCDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。.

使用 jQuery 內(nèi)核, 你不需要在電腦上安裝任何東西; 你僅僅需要在你的網(wǎng)頁中加載以下層疊樣式 (.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>

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例

國內(nèi)用戶推薦使用百度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>

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例

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


下載 jQuery Mobile

如果你想將 jQuery Mobile 放于你的主機(jī)中,你可以從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>

提示： 將下載的文件放置于與網(wǎng)頁同一目錄下。

lamp你是否想知道為什么在 <script> 標(biāo)簽中 沒有插入 type="text/javascript" ?

在 HTML5 已經(jīng)不需要該屬性。 JavaScript 在所有現(xiàn)代瀏覽器中是 HTML5 的默認(rèn)腳本語言！