最新的Web开发教程
 

jQuery Mobile入门


加入jQuery Mobile的到您的网页

有两种方法可以jQuery Mobile的添加到您的网站。 您可以:

  • 链接到存储在一个CDN jQuery Mobile的库(推荐)
  • 链接到储存在计算机中的jQuery Mobile的图书馆

链接到jQuery Mobile的从CDN

一个CDN(内容分发网络)是用来在网络上分发经常使用的文件。
这使得下载速度为用户要快得多。

与jQuery的核心,没有什么在计算机上安装; 你只包括以下样式表(.css)和JavaScript库(.js)直接到你的HTML页面,让jQuery Mobile的工作:

jQuery Mobile的CDN:

<head>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
试一试»

视口<meta>里面标记<head>元素指定浏览器应该如何控制页面缩放级别和尺寸。

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>

提示:将下载的文件在同一目录中,你想使用它的页面。

你想知道为什么我们没有type="text/javascript"里面<script>标记?

这不是在HTML5必需的。 JavaScript是在HTML5和所有现代浏览器的默认脚本语言!