簡介： 對於那些使用 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 模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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 小部件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 小部件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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="http://www.google.com/images/logos/ps_logo2.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 所提供的。它有廣泛的功能，包括限制日期範圍，重新對日曆上的日期命名（用於國際化），以及其他功能。它使用起來很簡單。建立一個如下所示的標準文字輸入框：
|
1 |
<input type="text" id="dateDemo" size="10"> |
然後使用如下程式碼將其轉變為一個日曆：
|
1 |
$('#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 建立一個樹選單
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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 上傳程式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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 建立一個工具提示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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 頁面，請檢視 下載 一節。歡迎您使用它開始構建您的專案。
參考資料
學習
JavaScript 教程 (w3schools)：如果您新接觸 JavaScript 請從此處開始。
jQuery 網站：查詢 jQuery UI 所需的 jQuery 庫的下載和文件。
jQuery UI 網站：構建您的自定義下載，包括只有您需要的工具。網站還有大量精彩的文件和示例。
jQuery UI ThemeRoller：構建您自己的主題，並且預覽預定義的主題。網站還提供了一份常用控制元件快速示例的手冊。