jQuery Mobile - 設定

本章將討論如何安裝和設定 jQuery Mobile。

下載 jQuery Mobile

當您開啟連結jquerymobile.com/時，您會看到有兩個選項可以下載 jQuery Mobile 庫。

自定義下載 − 點選此按鈕下載庫的自定義版本。
最新穩定版 − 點選此按鈕獲取 jQuery Mobile 庫的穩定且最新的版本。

使用下載構建器進行自定義下載

使用下載構建器，您可以建立一個自定義版本，只包含您需要的庫部分。當您下載這個新的自定義版本的 jQuery Mobile 時，您將看到以下螢幕。

您可以根據需要選擇庫，然後點選構建我的下載按鈕。

穩定版下載

點選穩定版按鈕，可以直接跳轉到包含最新版本 jQuery Mobile 庫的 CSS 和 jQuery 檔案的 ZIP 檔案。將 ZIP 檔案的內容解壓到 jQuery Mobile 目錄。

此版本包含所有檔案，包括所有依賴項、大量的演示以及庫的單元測試套件。此版本有助於入門。

從 CDN 下載 jQuery 庫

CDN（內容分發網路）是一個旨在為使用者提供檔案的伺服器網路。如果您在網頁中使用 CDN 連結，它會將託管檔案的責任從您自己的伺服器轉移到一系列外部伺服器。這也提供了一個優勢，如果您的網頁訪問者已經從同一個 CDN 下載了 jQuery Mobile 的副本，則無需重新下載。您可以將以下 CDN 檔案包含到 HTML 文件中。

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

在本教程中，我們使用的是庫的 CDN 版本。我們使用 AMPPS（AMPPS 是一個包含 Apache、MySQL、MongoDB、PHP、Perl 和 Python 的 WAMP、MAMP 和 LAMP 整合環境）伺服器來執行我們所有的示例。

示例

以下是 jQuery Mobile 的一個簡單示例。

線上演示

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://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>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

以上程式碼的詳細資訊如下：

此程式碼位於 head 元素內。

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

視口用於指定（由瀏覽器）顯示頁面的縮放級別和尺寸。
content = "width = device-width" 用於設定頁面或螢幕裝置的畫素寬度。
initial-scale = 1 設定初始縮放級別，即頁面第一次載入時的縮放級別。

包含以下 CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

``標籤內的內容是顯示在瀏覽器中的頁面。

<div data-role = "page">
   ...
</div>

data-role = "header" 在頁面頂部建立頁首。
data-role = "main" 用於定義頁面的內容。
data-role = "footer" 在頁面底部建立頁尾。
class = "ui-content" 包含頁面內容內的填充和邊距。

輸出

讓我們執行以下步驟來檢視以上程式碼是如何工作的：

將以上 html 程式碼儲存為simple_example.html檔案到您的伺服器根目錄。
開啟此 HTML 檔案，地址為 https:///simple_example.html，將會顯示以下輸出。

列印頁面