最新的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和所有現代瀏覽器的默認腳本語言!