使用 jQuery UI 和 jQuery 插件構建更好的 Web 應用程序

openkk 12年前發布 | 90K 次閱讀 jQuery UI jQuery Ajax框架

簡介： 對于那些使用 JavaScript 和 jQuery 庫從桌面應用程序轉向 Web 應用程序的開發人員來說，他們還不習慣去考慮應用程序基本的外觀，因為這些以前都是由操作系統來處理的。了解 jQuery UI，一個基于 jQuery 的 UI 工具箱，使創建漂亮的界面更為容易。本文同時也介紹了一些 jQuery 插件，可以加速 Web 開發并有助于創建我們所熟悉的，且流暢、直觀、靈活的界面。

簡介

如果您是一個傳統桌面應用程序開發人員，并且正在轉向開發 Web 應用程序，在學習 HTML 和 CSS 方面您可能不會遇到什么困難，但為應用程序設計一個漂亮的外觀可能會是一個挑戰。jQuery UI 和各種 jQuery 插件對于快速將 Web 應用程序組合在一起有極大的幫助，只需在 GUI 設計上花費少量的時間。

JavaScript 和 jQuery

如果您希望頁面有任何形式的動態內容或者交互，那么 JavaScript 一直是構建 Web 頁面的一個固有部分。如果沒有 JavaScript，您想要在運行時更新頁面，都必須刷新頁面，這會導致界面不便于操作。在最近幾年中，JavaScript 日益重要，因為它使得 Web 應用程序變得更加強大。JavaScript 甚至通過像 Node.js （一個服務端 JavaScript 引擎）這樣的技術，在服務端也能找到一席之地。如果您想溫習 JavaScript 的基本內容以及了解關于 Node.js 的更多信息，請查看參考資料的鏈接。

jQuery 是一個主要使用客戶端 JavaScript 代碼的庫。它可以大幅度提高編寫 UI 代碼的速度，并提供了許多常用操作的快捷方式。它還包括了一個靈活的、用于創建動態界面并且瀏覽器兼容的 Ajax 庫。更多信息鏈接請查看參考資料，包括該庫開發版和產品版拷貝的下載鏈接。產品代碼已經是 “最小化的”，這意味著所有不必要的空白和注釋都被刪除了。如果您想了解該庫的內部實現，那么強烈建議使用開發版拷貝，因為它更容易閱讀。在使用任何第三方庫之前，您都需要對其進行審查，以保證您理解并喜歡它的質量和功能。

jQuery UI

jQuery UI 是一個 UI 小部件和 CSS 樣式表的集合，它們被打包到一起以完成常用的任務，例如通過 JavaScript 和 CSS 來創建一個向用戶提示信息的自定義窗口，而不是使用舊有的彈出窗口。當您訪問 jQuery UI 網站時（鏈接請查看參考資料），您會發現并沒有直接下載的選項。相反，網站提供了一個構建自定義下載的鏈接。點擊該鏈接，您可以組裝適合您自己的個性化包，您可以去掉任何不需要使用的組件（例如 Accordion 或者 Datepicker 小部件）來縮小庫的大小。

當您下載自己的 jQuery UI 包時，還需要注意其他一些文件。development-bundle 目錄下包含了 demonstrations 和documentation，它們雖然有用但不是產品環境下部署所必需的。但是，在 css 和 js 目錄下的文件，必須部署到您的 Web 應用程序中。js 目錄包含 jQuery 和 jQuery UI 庫；而 css 目錄包括 CSS 文件和所有生成小部件和樣式表所需的圖片。

內容主題/皮膚

jQuery UI 除了提供從主頁上組裝下載之外，您還可以選擇使用某個特定主題。為了節省時間，jQuery UI 頁面提供了一個工具，可以用來查看網站當前可用的不同主題，或者您也可以在網站上通過指定喜歡的顏色，來創建屬于您自己的主題。這樣做主要是為您自動組裝所需的 CSS 設置，以便節省一些時間。例如，圖 1 展示了 Humanity 主題（頂部）與 Start 主題（底部）的對比。每個主題都包括所有對應的圖標集合。

圖 1. Humanity 主題與 Start 主題的對比

主題提供了一個簡單獲取所有美觀的 UI 組件的方式，而無需您花費大量時間修改 CSS 值或者使用圖片編輯器制作靜態圖片元素。本文中的示例使用了 Humanity 主題。但是，使用皮膚并不意味著您不能使用自己的 CSS 來滿足或者重寫 jQuery UI CSS。清單 1 提供了一個基本的使用 jQuery 和 jQuery UI 的 HTML 模板，并且包括了一個自定義的 CSS 文件，app.css，其重寫了按鈕中文本周圍的空間大小。它還包括了app.js，您可以在此編寫特定于應用程序的 JavaScript 代碼。
清單 1. 一個加載 jQuery UI 的基本 HTML 模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<body>
</body>
</html>

app.css:
body {
        font-size: smaller;
}

/* Override jQuery UI theme's padding on buttons: */
.ui-button-text-only .ui-button-text {
        padding: 0.2em 0.5em;
}

界面改進：Dialog 小部件

許多 Web 開發人員都熱衷于使用 alert 或者 confirm 功能，以便為訪問者提供（或者從訪問者獲取）消息。不過這些消息非常的不美觀，尤其是它們通常包括一個諸如 “www.yoursite.com 的頁面……” 的標題，實在不夠醒目。另一個常見做法是打開一個彈出窗口。這個方法由于彈出窗口攔截器的問題，使用的越來越少，不過它也有些過時。

使用 jQuery UI Dialog 功能，當您需要與某個訪問者交互時，您可以展示任意內容或者一個通過 display:none 隱藏了的預定義<div> 標簽。圖 2 顯示了該功能在整個外觀上的不同。
圖 2. 對比一個普通的 alert 窗口和一個 jQuery UI Dialog 小部件

在顯示內容的文檔中，當有一個獨立的 <div> 標簽時，使用 Dialog 小部件是最簡單的。一般來說，只要有一個可重復用于對話框的空 <div> 標簽，它就可以正常工作。首先，設置內容，然后顯示對話框，如清單 2 所示：
清單 2. 顯示一個 jQuery UI Dialog 小部件

<div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>

JavaScript 代碼:
$('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting
   modal to true, you can require the user to dismiss this before interacting
  with more of the page.');
$('#dialogHolder').dialog({
  autoOpen: true,
  title: 'Hello!',
  modal: true,
  buttons: {
    "Go Away": function() {
      $(this).dialog("close");
    }
  }
})

界面改進：Accordions 和選項卡

jQuery UI 引入了一個名為 Accordion 的小部件，它允許您擁有多個含有內容的區域，但是一般情況下，只有一個區域是可見的（默認）。點擊其他區域，會通過一個動畫效果來隱藏可見區域，然后顯示新的區域。Accordion 的一個優點是幾乎能夠擁有無限個部分，因為多余的是按照垂直排布的。這個功能提供了一個流暢并且簡單的界面。

許多網站訪問者對傳統的選項卡式的布局更加熟悉。這里，當前選中的選項卡是可見的，而其他選項卡是隱藏的，因為受到水平寬度的限制，所以有效地限制了選項卡的個數。圖 3 顯示了一個 Accordion 小部件（頂部）和一個 Tab 小部件（底部）。

圖 3. jQuery Accordion 和 Tab 小部件

Accordions 通過一個含有多個區域序列的 <div> 來創建。每個區域由一個 <h3> 以及一個 <a> 標簽開始，隨后是一個含有每個 accordion 區域內容的子容器 <div> 。類似的，選項卡控件也使用了一個含有其他內容的 <div>，然后使用一個 <ul> 標簽來定義選項卡。在每個 <li> 中，使用了一個錨標簽（<a>）將選項卡綁定為 <div> 的內容。接下來，是一系列定義了實際內容的 <div>元素，它們的 id 與無序列表（<ul>）相對應。查看清單 3 更容易理解。一旦內容定義完畢，就可以在相應 <div> 元素的 jQuery 選擇器上，通過調用 .accordion(); 或者 .tab(); 來初始化 accordion 或者選項卡功能。
清單 3. 創建一個 Accordion 小部件和一個 Tab 小部件

<div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <h3><a href=#">Top Section</a></h3>
  <div>
    <p>Initial content for the first "tab" of the accordion goes here.</p>
  </div>
  <h3><a href=#">Next Section</a></h3>
  <div>
    <p>More content...</p>
  </div>
  <h3><a href=#">Last section</a></h3>
  <div>
    <p>You can have as many accordion sections as needed.</p>
  </div>
</div>

<div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <ul>
    <li><a href="#t1">First Tab</a></li>
    <li><a href="#t2">Middle Tab</a></li>
    <li><a href="#t3">Last Tab</a></li>
  </ul>
  <div id="t1">
    <p>First tab content goes here. The anchor href for the tab titles must
       match the div for the content.</p>
  </div>
  <div id="t2">
    <p>Second Tab Content</p>
    <br />
    <img src="https://simg.open-open.com/show/e2830f108d9c3b00c56a307a88ea4b56.png" />
  </div>
  <div id="t3">
    <p>As with the Accordion, you can have as many tabs as you want, although
       horizontal width places some practical limit there.</p>
  </div>
</div>

in JavaScript code:
$(document).ready(function() {
  $('#accordionDemo').accordion();
  $('#tabDemo').tabs();
}

小部件： Progressbar

jQuery UI 還提供了一個進度條小部件，用于需要長時間運行的操作。這個小部件十分易于使用。定義一個帶有 ID 但是沒有內容的<div> ，然后在其上調用 progressbar 方法；例如 $('#yourDiv').progressbar();。在實際中，這個小部件可以與 Ajax 結合使用來反映一個操作的進度。

小部件： Datepicker

一個對于輸入的日期格式有嚴格要求的網站會令人反感，尤其是訪問者來自不同的國家（有各自的日期格式）。但是使用一個可以接受任意格式的輸入框也是危險的，需要進行后端驗證，并且當輸入的日期無法解析時，還要有辦法通知訪問者。一個簡單的解決方案是使用一個日期選擇小部件，正如 jQuery UI 所提供的。它有廣泛的功能，包括限制日期范圍，重新對日歷上的日期命名（用于國際化），以及其他功能。它使用起來很簡單。創建一個如下所示的標準文本輸入框：

<input type="text" id="dateDemo" size="10">

然后使用如下代碼將其轉變為一個日歷：

$('#dateDemo').datepicker({ 'maxDate': '+4m'});

上面的代碼定義了一個最大日期，即從當前時間開始后的四個月（撰寫本文時為 2011 年 3 月 5 日）。截圖圖 4 反映了這一點。

圖 4. jQuery UI Datepicker 小部件

使用 jQuery 動畫

jQuery 自身提供了使用 animate 的能力，可以實現將任意屬性從一個值過渡到其他值的動畫效果。當您定義自己的動畫效果時這個功能很有用。但是通常編寫自己的動畫效果會花費很多時間。jQuery UI 添加了一些預定義動畫，包括 stand-alone effects Bounce、Highlight、Pulsate、Shake、Size 以及 Transfer，以及其他例如 Blind Clip、Drop、Explode、Fade、 Fold、Puff、Slide 以及 Scale 等 Show 和 Hide 效果。這些效果都用于常用的 jQuery show 和 hide 方法；例如， $('#googleLogo').show('slide', {}, 1000); 或者 $('#googleLogo').hide('explode', {}, 2000);。

jQuery 插件

第三方已經為 jQuery 開發了大量的插件。雖然這些插件都需要 jQuery，但是它們通常都獨立于 jQuery UI，不需要 jQuery UI 也可以使用。我們來看一下一些特別有用的插件。

Simple Tree

自從 Microsoft? Windows? Explorer 第一次出現以來，基于樹的菜單就流行起來。它是一種在復雜資源集合（例如文檔）中導航的簡單方式。jQuery Simple Tree 插件可以很容易的實現樹狀菜單，并且在點擊時支持任意 JavaScript 動作。如果需要，插件還可以支持拖拽樹的項（item），對其重新組織，并在放下時觸發一個方法。（下載鏈接請查看參考資源；所有所需的組件可以在下載一節的樣例代碼中找到。）圖 5 顯示了使用中的 Simple Tree 插件。

圖 5. The Simple Tree jQuery 插件

樹的內容通過一個單獨的外部 <ul> 元素來定義，包含一個定義了樹的 ID，以及用于樣式化的 CSS 設置。在其內部，使用一個 <li>元素來定義一個根項。在這個元素內部，放置了另一個 <ul> 元素，以及位于該元素中的樹項（每一項都在其自己的 <li> 元素中）。清單 4 說明了這個布局。當完成后，調用 simpleTree 方法來激活樹功能。
清單 4. 使用 Simple Tree 創建一個樹菜單

<head>
  <link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simple.tree.js" type="text/javascript"></script>
</head>
<body>
  <ul id="treeDemo">
    <li><span>Here are some items.</span>
      <ul>
        <li id="TopmostBranch"><span>Top Branch</span>
          <ul>
            <li id="SubItem1"><span>Sub items</span></li>
            <li id="SubItem2"><span>are in another</span></li>
            <li id="SubItem3"><span><ul> level.</span>
              <ul>
                 <li id="SubSubItem1"><span>like this!</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="AnotherBranch"><span>Another Branch</span></li>
        <li id="LastBranch"><span>Last Branch</span></li>
      </ul>
    </li>
  </ul>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#treeDemo').simpleTree({
  autoclose: true,
  afterClick: function(node) {
    alert($('span: first',node).parent().attr('id') + " was clicked.");
  },
  animate: true,
  drag: false
  });
});

Uploadify

Uploadify jQuery 插件允許您將文件上傳到您的網站，而不需在一個新的頁面進行 POST 操作，并且在文件上傳時顯示一個進度條指示。上傳自身是通過一個 Adobe? Flash? 組件來處理。該工具允許大量的自定義，包括指定允許的文件擴展名、大小限制、以及是否允許一次選擇多個文件。當每個文件上傳完成后，會調用 onComplete 方法；當所有文件完成后會調用 onAllComplete 方法。 Uploadify 默認的上傳處理程序會在響應中返回已上傳的文件名，但是這個處理程序可以很容易的進行定制化，以滿足您的需要（例如，將一個文件上傳到一個論壇或者執行其他動作）。清單 5 顯示了如何使用 Uploadify 來創建一個文件上傳。
清單 5. 將一個標準的文件輸入轉化為 Uploadify 上傳程序

<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="uploadify/swfobject.js" type="text/javascript"></script>
  <script src="uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
  <div style="margin-left: auto; margin-right: auto; width: 200px">
    <b>Upload a file to test:</b> <input id="uploadifyDemo"
       name="uploadifyDemo" type="file" />
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#uploadifyDemo').uploadify({
    'auto': true,
    'folder': 'tmp',
    'cancelImg': 'uploadify/cancel.png',
    'script': 'uploadify/uploadify.php',
    'uploader': 'uploadify/uploadify.swf',
    onComplete: function(evt, id, file, resp, data) {
      alert('The file "' + file['name'] + '" with size "' + file['size'] +
            '" was uploaded. (It will be deleted in a few minutes
            automatically.)' + "\n\nThe upload script returned: " + resp);
    }
  });
});

保證您的上傳目錄不能被公共訪問或者被很好的保護是一個很好的做法。如果不這么做，可能會導致攻擊者上傳他們自己的代碼并在您的服務器上執行。在這個示例中，文件被寫入到文章示例目錄下的 tmp/ 目錄中，因此您只需要編寫一個 .htaccess 規則，禁止所有訪問者訪問 tmp/ 目錄。此外很重要的一點是，保證運行您 Web 服務器的用戶（例如www-data 或者 apache）擁有上傳目錄的寫權限。

Simpletip

不管是桌面還是基于 Web，任何應用程序對用戶來說都應該是可以自助生成文檔的，以方便用戶使用。Tooltips 是實現這一點的一個快速的方式。在使用 tooltip 幾十年后，大多數人在不確定“pf ”是什么時，都會不自覺的將鼠標停留在屏幕上某一項，等待一些彈出幫助。Simpletip 插件使這很容易做到。通過 Simpletip，您可以創建基本的工具提示或者使用其他選項來控制位置。它還支持顯示和隱藏工具提示的效果，包括通過一個 JavaScript 方法自定義的動畫效果。通過使用 $('#elementId').html()，工具提示的內容可以來自于硬編碼的文本或者其他一些頁面內容，例如一個隱藏的 <div> 元素。您也可以通過編程的方式，編寫類似$('#simpleTip3').simpletip({ content:getToolTip()}); 的代碼，使用 Ajax 或者從文檔中的其他來源來獲取內容。清單 6 展示了在句中單詞上使用工具提示的不同樣式。
清單 6. 使用 Simpletip 創建一個工具提示

<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
  <p>
    SimpleTip lets you add <a id="simpleTip1">simple tooltips</a>,
    including <a id="simpleTip2">more advanced</a> tooltips or even
    <span id="simpleTip3">tooltips with effects</span> with a minimum of fuss.
  </p>

  <div id="simpleTip2Content" style="display: none;">
    <div style="padding: 5px;">
      <b>Fancy</b> content can be defined in a separate div.
    </div>
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#simpleTip1').simpletip({
      content: 'A basic tooltip.',
      fixed: false
  });

  $('#simpleTip2').simpletip({
      content: $('#simpleTip2Content').html(),
      fixed: true,
      position: ['100', '0']
  });

  $('#simpleTip3').simpletip({
    content: 'Some content to animate',
    hideEffect: 'slide',
    showEffect: 'custom',
    showCustom: function() {
      $(this).css({
        display: 'block',
        fontSize: '0.3em',
        color: '#0000ff',
        backgroundColor: '#ffffff'
      });
      $(this).animate({
        color: '#ff0000',
        fontSize: '1em'
      }, 400);
    }
  });
});

結束語

通過使用本文中描述的工具，您可以為您的 Web 應用程序快速創建可視化控件，并將精力關注于網站的實際功能。您還需要仔細考慮自然的頁面流程，以及應用程序中每個頁面的可用性，即使使用了 jQuery UI 和這些插件，仍需要仔細設計頁面。但是，它們可以提高開發速度并簡化實現。要下載包含本文中所有樣例代碼的完整 Web 頁面，請查看下載一節。歡迎您使用它開始構建您的項目。

來自: blog.jobbole.com

本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1339675581053.html

jQuery UI jQuery Ajax框架

使用 jQuery UI 和 jQuery 插件構建更好的 Web 應用程序

相關經驗

相關資訊

相關文檔

目錄