jQuery UI - 環境設定

本章將討論 jQuery UI 庫的下載和設定。我們還將簡要研究目錄結構及其內容。jQuery UI 庫可以在您的網頁中透過兩種方式使用：

從官方網站下載 UI 庫

當您開啟連結 http://jqueryui.com/ 時，您會看到有三個選項可以下載 jQuery UI 庫：

自定義下載 - 點選此按鈕下載庫的自定義版本。
穩定版 - 點選此按鈕獲取 jQuery UI 庫的穩定版和最新版本。
舊版本 - 點選此按鈕獲取 jQuery UI 庫之前的主要版本。

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

使用下載構建器，您可以建立一個自定義版本，只包含您需要的庫部分。您可以根據所選主題下載這個新的自定義版本的 jQuery UI。您將看到以下螢幕（同一頁面分成兩張影像）：

當您只需要 jQuery UI 庫的特定外掛或功能時，這很有用。此版本的目錄結構如下圖所示：

JqueryUI Custom Directory Structure Page

未壓縮檔案位於development-bundle目錄中。未壓縮檔案最好在開發或除錯期間使用；壓縮檔案可以節省頻寬並提高生產環境中的效能。

穩定版下載

點選“穩定版”按鈕，可以直接下載包含 jQuery UI 庫最新版本原始碼、示例和文件的 ZIP 檔案。將 ZIP 檔案內容解壓到jqueryui目錄。

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

舊版本下載

點選“舊版本”按鈕，可以直接下載 jQuery UI 庫之前主要版本的 ZIP 檔案。此版本也包含所有檔案，包括所有依賴項、大量演示，甚至庫的單元測試套件。此版本有助於入門。

從 CDN 下載 UI 庫

CDN 或內容分發網路是一個旨在向用戶提供檔案的伺服器網路。如果您在網頁中使用 CDN 連結，它會將託管檔案的責任從您自己的伺服器轉移到一系列外部伺服器。這也有一個優勢，那就是如果您的網頁訪問者已經從同一個 CDN 下載了 jQuery UI 的副本，則無需重新下載。

jQuery 基金會、Google 和 Microsoft 都提供託管 jQuery 核心和 jQuery UI 的 CDN。

由於 CDN 不需要您託管自己的 jQuery 和 jQuery UI 版本，因此它非常適合演示和實驗。

在本教程中，我們使用了庫的 CDN 版本。

示例

現在讓我們使用 jQuery UI 編寫一個簡單的示例。讓我們建立一個 HTML 檔案，並將以下內容複製到 <head> 標籤中：

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

以上程式碼的細節：

第一行透過 CSS 新增 jQuery UI 主題（在本例中為ui-lightness）。此 CSS 將使我們的 UI 更具樣式。
第二行新增 jQuery 庫，因為 jQuery UI 是建立在 jQuery 庫之上的。
第三行新增 jQuery UI 庫。這將在您的頁面中啟用 jQuery UI。

現在讓我們向 <head> 標籤新增一些內容：

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

在 <body> 中新增此內容：

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

完整的 HTML 程式碼如下所示。將其儲存為myfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

在您的瀏覽器中開啟上述頁面。它將顯示以下螢幕。

列印頁面