W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 安装



在你的网页中添加 jQuery Mobile

你可以通过以下几种方式将jQuery Mobile添加到你的网页中:

  • 从 CDN 中加载 jQuery Mobile (推荐)
  • 链接到存储在您的计算机上的jQuery Mobile库

从 CDN 中加载 jQuery Mobile

Note 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>
尝试一下 »

Note

<head> 元素中的视口 <meta> 标签指定浏览器如何控制页面缩放级别和维度。

width=device-width 设置页面的宽度以遵循设备的屏幕宽度(这将随设备而异)。

initial-scale=1 设置浏览器首次加载页面时的初始缩放级别。


链接到您的计算机上存储的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>

提示: 将下载的文件放置于与网页同一目录下。

Note 你是否想知道为什么在 <script> 标签中 没有插入 type="text/javascript" ?

在 HTML5 已经不需要该属性。 JavaScript 在所有现代浏览器中是 HTML5 的默认脚本语言!