如今，網站比以往更具可定製性，允許使用者更改其空間，根據自己的喜好對其進行個人化。個人化的首頁或儀表板頁面（例如 iGoogle、MyYahoo! 和 MyAOL）日漸普及，大多數 Web 應用程式內甚至也整合了類似的功能。jQuery 庫簡化了此類複雜 JavaScript 互動的編寫，隨著 jQuery UI 的引入，這項功能得到了進一步的簡化，該庫以易於訪問的 jQuery 外掛程式的形式提供了常用使用者介面類型。
本文介紹了如何利用 Ajax 和 jQuery UI 建立具有各種定製功能的高度可定製的 UI。您將瞭解如何定製 Web 頁面的各個方面，以及如何使用 Ajax 儲存喜好設定。此外，您還將利用拖放操作等技術來排序清單項目，以及組織頁面元素和 UI 小組件來切換主題和色彩配置 —一切都能在單獨一個 Web 頁面中完成。
建立定製 UI 功能
jQuery UI 是一個 UI 庫，其中包含易於編寫的互動、動畫和效果，還包括可輕鬆定製主題的小組件。您可以對下載進行定製，選擇您希望包含的主題，還可以提取組件，例如 UI 核心（必需）、互動、小組件或效果。要使用 jQuery UI，您還需要最新版本的 jQuery 庫。下載部分包含此庫，但您也可以在稍後需要更新此庫時直接從 jQuery 網站下載最新版本的庫。清單 1 展示了如何在 Web 頁面中包含 jQuery UI 庫和其他必備檔案。
清單 1. 建立包含 jQuery UI 代碼的 Web 頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> </head> <body> </body> </html>
所包含的第一個 CSS 提供了所選主題 ui-lightness 的代碼。 這是預設主題，是在 jQuery UI 下載過程中選定的，但您可以將其更改為所提供的任意主題。如果您已經下載了該庫，希望更新正在使用的主題，只需訪問 ThemeRoller，從庫中下載現有主題即可，也可以利用它來定製您自己的主題。代碼中包含的第二個 CSS 提供了定製類，用於設定頁面樣式，或者覆蓋所選主題內使用的屬性。最後，代碼中包含的 JavaScript 檔案是 jQuery 和 jQuery UI 庫。
利用 jQuery UI 建立拖放式介面
拖放功能如今越來越常見，可用於排序列表和組織頁面元素，許多 Web 應用程式的個人化首頁中也使用了這種功能。jQuery UISortable 外掛程式提供了為 Web 頁面添加可排序功能的快捷方法，帶有許多選項和事件，支援您按照自己希望的方式定製互動。
清單 2 中的樣本展示了如何利用 Sortable 外掛程式建立簡單的可排序列表。您可以利用此外掛程式讓簡單的 HTML 列表成為可排序的拖放式列表。首先要為此列表添加一個標識符 —本例中指定 sortable 作為 ID，以便使用 jQuery 輕鬆找到此列表，並為其添加可排序函數調用。還要為各項添加 ui-state-default 類，以便保持其樣式與所選主題一致。
清單 2. 利用 jQuery UI Sortable 外掛程式建立一個簡單的可排序列表
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> <script type="text/javascript"> $(function(){ $( "#sortable" ).sortable(); }); </script> </head> <body> <h1> Creating Customizable Web Interfaces with the jQuery UI and Ajax </h1> <ul id="sortable"> <li id="item1" class="ui-state-default">Item 1</li> <li id="item2" class="ui-state-default">Item 2</li> <li id="item3" class="ui-state-default">Item 3</li> <li id="item4" class="ui-state-default">Item 4</li> <li id="item5" class="ui-state-default">Item 5</li> <li id="item6" class="ui-state-default">Item 6</li> <li id="item7" class="ui-state-default">Item 7</li> </ul> </body> </html>
如果需要儲存清單項目位置，可能必須將詳細資料儲存到 cookie 或資料庫，以便正確呈現頁面，從而支援後續的頁面查看。如果您使用的是資料庫，就可以使用 Ajax 將此資料發送到伺服器端指令碼，使之能夠將值寫入資料庫，並在隨後初始頁面載入時返回帶有恰當位置的 XML 或 JSON 響應，以將各元素放置在正確的位置。清單 3 中的範例程式碼展示了如何將位置值發送到伺服器端 PHP 指令碼。
清單 3. 將位置值發送到伺服器端指令碼
$( "#sortable" ).sortable({ stop: function(event, ui) { $("#sortable li").each( function(index){ $.ajax({ type:'POST', url:'filename.php', data:'method=updateposition&id='+$(this).attr('id'))+'&positions='+index, success: function(xml){ // Success } }); } ); } });
要儲存可排序列表中項的位置，需要利用一個事件來確定排序項的時間。您可以利用多種可排序事件，但這個樣本需要 stop 事件，因為只有該事件能夠在所有可排序元素完成排序後觸發。這一點非常重要，因為您需要在嘗試儲存位置之前，確保所有元素都處於新位置。觸發 stop 事件之後，您要遍曆各清單項目，以擷取其在列表中的索引，隨後檢索各項的 ID，再利用 Ajax 將這些值發送到一個 PHP 檔案，這會將結果儲存到資料庫，以便在稍後您返回該頁面時排序元素。
所用的 Sortable 外掛程式還提供了許多可實現其他定製的選項，例如：
----定義一個預留位置類，設定拖動一項時預留位置元素的樣式
----串連列表，使元素可以拖放到相同 Web 頁面中的另一個可排序列表
----在網格中顯示和限制可排序元素
----建立多欄介面，支援在各欄間拖動和排序元素
清單 4 中的樣本展示了如何建立包含拖放式元素的三欄介面。這三個欄使用 CSS 中三個彼此相鄰的 <div> 元素表示。為使 Sortable外掛程式處理分欄結構，只需使用 connectWith 選項，並將其值設定為各分欄元素上使用的 column 類。選項 connectWith 允許使用多欄介面，在各欄間拖動和排序元素。
清單 4. 三欄拖放式介面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> <script type="text/javascript"> $(function(){ $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> </head> <body> <h1> Creating Customizable Web Interfaces with the jQuery UI and Ajax </h1> <ul id="page"> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div> <div class="portlet-content"> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 6</li> <li class="ui-state-default">Item 7</li> </ul> </div> </div> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> </li> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> </li> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> </li> </ul> </body> </html>
為保持這些元素的樣式與您選擇的 jQuery UI 主題一致，您要使用某些 CSS 類將各元素定義為包含標題和內容的 portlet。 這些 CSS 類構成了 jQuery UI CSS 架構，允許您輕鬆設定 UI 元素的主題。
jQuery UI CSS 架構
至此為止，您已經用到了 jQuery UI CSS 架構中的一些類。在這一節中，我們將進一步探索，學習如何利用這些類讓使用者能動態更改其個人化儀表板頁面的外觀。該架構套件含許多類，涵蓋了常見的 UI 元素。應用這些類時，它們會根據您選擇的主題自動為您的小組件設定主題。可用類的類別包括布局協助元素、小組件容器、互動狀態、互動線索、表徵圖（包括狀態、映像和表徵圖類型）以及其他可視化元素，例如圓角協助元素、覆蓋和陰影。
使用該架構中的類時，可以輕鬆在可用主題間切換。清單 5 展示了利用 ThemeRoller 提供的主題切換器工具能多麼輕鬆地完成此過程。
清單 5. 用於為樣本 Web 頁面上的定製 portlet 添加主題切換器的 JavaScript 和 HTML
<script type="text/javascript"> $(function(){ $('#switcher').themeswitcher(); $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> <div class="portlet-content"> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <div id="switcher"></div> </div> </div>
清單 5 中的樣本展示了您能多麼輕鬆地為現有樣本 Web 頁面中的 portlet 添加主題切換器工具。通過為小組件包含相關 JavaScript 檔案，並建立一個作為容器的 <div> ，即可輕鬆定位該 <div> ，並為其應用 themeswitcher 。這種做法會得到一個包含 jQuery UI 提供的可用主題的下拉式功能表。選中一個主題時，整個頁面將立即更新來匹配該主題。在允許使用者定製其頁面時，此類小組件非常有用，其選項甚至可以儲存到前面敘述的資料庫中，以儲存元素位置（但這種工具本身已經擁有基於 cookie 的儲存，在使用者重新整理頁面時，此前使用者選中的主題將仍然保持可用）。
該庫還包含有用的預構建小組件，您可輕鬆地將其添加到自己的頁面中。每個小組件均已結構化為您的自訂佈景主題或者您選定的主題呈現。清單 6 中的樣本展示了如何在頁面中利用 Tab 小組件來為使用者組織某些內容，並使用現有主題加以呈現。
清單 6. 在現有主題內添加 jQuery UI 小組件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"> </script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> <script type="text/javascript"> $(function(){ $( "#tabs" ).tabs(); $('#switcher').themeswitcher(); $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> </head> <body> <h1> Creating Customizable Web Interfaces with the jQuery UI and Ajax </h1> <div id="tabs"> <ul> <li> <a href="#tabs-1">Portlets</a> </li> <li> <a href="#tabs-2">Profile information</a> </li> </ul> <div id="tabs-1"> <ul id="page"> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all"> ToDo List </div> <div class="portlet-content"> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 6</li> <li class="ui-state-default">Item 7</li> </ul> </div> </div> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all"> Header </div> <div class="portlet-content">content</div> </div> </li> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all"> Header </div> <div class="portlet-content">content</div> </div> </li> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all"> Theme </div> <div class="portlet-content"> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"> </script> <div id="switcher"></div> </div> </div> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all"> Header </div> <div class="portlet-content">content</div> </div> </li> </ul> <br class="clear" /> </div> <div id="tabs-2"> <p>Show profile information here</p> </div> </div> </body> </html>
選項卡式介面包含一個作為容器的 <div> 元素，該元素具有選項卡的 ID，還有兩個用作實際選項卡的清單項目，包含選項卡名稱，兩個帶有 ID 的選項卡與選項卡清單項目中的錨定標記匹配。如您所見，可以輕而易舉地添加恰當的 HTML，以顯示選項卡和選項卡內容，隨後還能輕鬆地將 Tab 小組件應用於選項卡容器。這將自動顯示一個選項卡式介面，並根據您選擇的類，應用已選主題。
使用效果增強 UI
通過 jQuery UI 庫可以利用許多類別的效果，其中許多過渡都是對現有 jQuery 方法的簡單擴充。每個類別都包含帶有自定參數的方法，例如：
Color transitions:
------Animate.用於為一個 Web 頁面實現動畫和彩色效果
Visibility transitions:
------Toggle.開關一個元素的可視與否，隱藏或顯示此元素
------Show.顯示一個元素，可以使用下列任何動畫類型實現動畫效果
------Hide.隱藏一個元素，可以使用下列任何動畫類型實現動畫效果
Class transitions:
------addClass .可用於為一個元素添加類，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
------removeClass .可用於為一個元素刪除類，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
------switchClass .可用於在兩個類之間切換，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
------toggleClass .可根據元素中是否已經包含類來為一個元素添加或刪除類，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
如部分方法說明所示，還有一些可與其他效果方法聯合使用的動畫效果。這些效果包括 Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide 和 Transfer。另外利用 jQuery 外掛程式，您還可以輕鬆應用其他一些進階技術。
與 jQuery UI 庫中的其他內容相同，效果的應用非常容易，只需在 Web 頁面中定位一個 HTML 元素或元素組，然後應用恰當的方法即可。清單 7 展示了如何對樣本 Web 頁面中各 portlet 內容應用的方法，以使用 Toggle 效果。在這個例子中，Toggle 效果是通過雙擊一個 Portlet 的標題觸發的，這會導致內容在隱藏和顯示之間切換。
清單 7. 應用 Toggle 效果隱藏和顯示 portlet 內容
<script type="text/javascript"> $(function(){ $( ".portlet-header" ).dblclick(function(){ $(this).parent().find(".portlet-content").toggle(); }); }); </script>
portlet 的內容是通過遍曆標題元素實現的，隨後利用 jQuery find 方法定位帶有 portlet-content 類的相關元素。
結束語
利用 jQuery UI 增強 Web 頁面非常簡單，基本上只需要包含恰當的檔案，並執行一次函數調用即可。在 jQuery 和 jQuery UI 這樣的庫出現之前，構建高度互動介面極為困難，因為必須從零開始編寫代碼，而且需要執行大量測試來保證代碼能在所有主流瀏覽器中正常工作。如今，您只要包含一個檔案並執行一次函數調用即可創造效果和可排序的元素，或者更改主題。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
