這篇文章主要為大家詳細介紹了jQuery UI結合Ajax創(chuàng)建可定制的Web界面，如何利用Ajax和jQuery UI創(chuàng)建具有各種定制功能的高度可定制的UI，感興趣的小伙伴們可以參考一下
如今，網(wǎng)站比以往更具可定制性，允許用戶更改其空間，根據(jù)自己的喜好對其進行個性化。個性化的主頁或儀表板頁面（例如 iGoogle、MyYahoo! 和 MyAOL）日漸普及，大多數(shù) Web 應用程序內甚至也整合了類似的功能。jQuery 庫簡化了此類復雜 JavaScript 交互的編寫，隨著 jQuery UI 的引入，這項功能得到了進一步的簡化，該庫以易于訪問的 jQuery 插件的形式提供了常用用戶界面類型。
本文介紹了如何利用 Ajax 和 jQuery UI 創(chuàng)建具有各種定制功能的高度可定制的 UI。您將了解如何定制 Web 頁面的各個方面，以及如何使用 Ajax 保存首選項。此外，您還將利用拖放操作等技術來排序列表項，以及組織頁面元素和 UI 小部件來切換主題和配色方案 —一切都能在單獨一個 Web 頁面中完成。
創(chuàng)建定制 UI 功能
jQuery UI 是一個 UI 庫，其中包含易于編寫的交互、動畫和效果，還包括可輕松定制主題的小部件。您可以對下載進行定制，選擇您希望包含的主題，還可以提取組件，例如 UI 內核（必需）、交互、小部件或效果。要使用 jQuery UI，您還需要最新版本的 jQuery 庫。下載部分包含此庫，但您也可以在稍后需要更新此庫時直接從 jQuery 網(wǎng)站下載最新版本的庫。清單 1 展示了如何在 Web 頁面中包含 jQuery UI 庫和其他必備文件。
清單 1. 創(chuàng)建包含 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，從庫中下載現(xiàn)有主題即可，也可以利用它來定制您自己的主題。代碼中包含的第二個 CSS 提供了定制類，用于設定頁面樣式，或者覆蓋所選主題內使用的屬性。最后，代碼中包含的 JavaScript 文件是 jQuery 和 jQuery UI 庫。
利用 jQuery UI 創(chuàng)建拖放式界面
拖放功能如今越來越常見，可用于排序列表和組織頁面元素，許多 Web 應用程序的個性化主頁中也使用了這種功能。jQuery UISortable 插件提供了為 Web 頁面添加可排序功能的快捷方法，帶有許多選項和事件，支持您按照自己希望的方式定制交互。
清單 2 中的示例展示了如何利用 Sortable 插件創(chuàng)建簡單的可排序列表。您可以利用此插件讓簡單的 HTML 列表成為可排序的拖放式列表。首先要為此列表添加一個標識符 —本例中指定 sortable 作為 ID，以便使用 jQuery 輕松找到此列表，并為其添加可排序函數(shù)調用。還要為各項添加 ui-state-default 類，以便保持其樣式與所選主題一致。
清單 2. 利用 jQuery UI Sortable 插件創(chuàng)建一個簡單的可排序列表
<!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 或數(shù)據(jù)庫，以便正確呈現(xiàn)頁面，從而支持后續(xù)的頁面查看。如果您使用的是數(shù)據(jù)庫，就可以使用 Ajax 將此數(shù)據(jù)發(fā)送到服務器端腳本，使之能夠將值寫入數(shù)據(jù)庫，并在隨后初始頁面加載時返回帶有恰當位置的 XML 或 JSON 響應，以將各元素放置在正確的位置。清單 3 中的示例代碼展示了如何將位置值發(fā)送到服務器端 PHP 腳本。
清單 3. 將位置值發(fā)送到服務器端腳本
$( "#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 事件，因為只有該事件能夠在所有可排序元素完成排序后觸發(fā)。這一點非常重要，因為您需要在嘗試保存位置之前，確保所有元素都處于新位置。觸發(fā) stop 事件之后，您要遍歷各列表項，以獲取其在列表中的索引，隨后檢索各項的 ID，再利用 Ajax 將這些值發(fā)送到一個 PHP 文件，這會將結果保存到數(shù)據(jù)庫，以便在稍后您返回該頁面時排序元素。
所用的 Sortable 插件還提供了許多可實現(xiàn)其他定制的選項，例如：
----定義一個占位符類，設定拖動一項時占位符元素的樣式
----連接列表，使元素可以拖放到相同 Web 頁面中的另一個可排序列表
----在網(wǎng)格中顯示和限制可排序元素
----創(chuàng)建多欄界面，支持在各欄間拖動和排序元素
清單 4 中的示例展示了如何創(chuàng)建包含拖放式元素的三欄界面。這三個欄使用 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 框架中的一些類。在這一節(jié)中，我們將進一步探索，學習如何利用這些類讓用戶能動態(tài)更改其個性化儀表板頁面的外觀。該框架包含許多類，涵蓋了常見的 UI 元素。應用這些類時，它們會根據(jù)您選擇的主題自動為您的小部件設定主題?？捎妙惖念悇e包括布局幫助元素、小部件容器、交互狀態(tài)、交互線索、圖標（包括狀態(tài)、圖像和圖標類型）以及其他可視化元素，例如圓角幫助元素、覆蓋和陰影。
使用該框架中的類時，可以輕松在可用主題間切換。清單 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 中的示例展示了您能多么輕松地為現(xiàn)有示例 Web 頁面中的 portlet 添加主題切換器工具。通過為小部件包含相關 JavaScript 文件，并創(chuàng)建一個作為容器的 <div> ，即可輕松定位該 <div> ，并為其應用 themeswitcher 。這種做法會得到一個包含 jQuery UI 提供的可用主題的下拉菜單。選中一個主題時，整個頁面將立即更新來匹配該主題。在允許用戶定制其頁面時，此類小部件非常有用，其選項甚至可以保存到前面敘述的數(shù)據(jù)庫中，以保存元素位置（但這種工具本身已經擁有基于 cookie 的存儲，在用戶刷新頁面時，此前用戶選中的主題將仍然保持可用）。
該庫還包含有用的預構建小部件，您可輕松地將其添加到自己的頁面中。每個小部件均已結構化為您的自定義主題或者您選定的主題呈現(xiàn)。清單 6 中的示例展示了如何在頁面中利用 Tab 小部件來為用戶組織某些內容，并使用現(xiàn)有主題加以呈現(xiàn)。
清單 6. 在現(xiàn)有主題內添加 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 的選項卡與選項卡列表項中的錨定標記匹配。如您所見，可以輕而易舉地添加恰當?shù)?HTML，以顯示選項卡和選項卡內容，隨后還能輕松地將 Tab 小部件應用于選項卡容器。這將自動顯示一個選項卡式界面，并根據(jù)您選擇的類，應用已選主題。
使用效果增強 UI
通過 jQuery UI 庫可以利用許多類別的效果，其中許多過渡都是對現(xiàn)有 jQuery 方法的簡單擴展。每個類別都包含帶有自定參數(shù)的方法，例如：
Color transitions:
------Animate.用于為一個 Web 頁面實現(xiàn)動畫和彩色效果
Visibility transitions:
------Toggle.開關一個元素的可視與否，隱藏或顯示此元素
------Show.顯示一個元素，可以使用下列任何動畫類型實現(xiàn)動畫效果
------Hide.隱藏一個元素，可以使用下列任何動畫類型實現(xiàn)動畫效果
Class transitions:
------addClass .可用于為一個元素添加類，可以包含類呈現(xiàn)的兩種不同顯示狀態(tài)之間的動畫效果
------removeClass .可用于為一個元素刪除類，可以包含類呈現(xiàn)的兩種不同顯示狀態(tài)之間的動畫效果
------switchClass .可用于在兩個類之間切換，可以包含類呈現(xiàn)的兩種不同顯示狀態(tài)之間的動畫效果
------toggleClass .可根據(jù)元素中是否已經包含類來為一個元素添加或刪除類，可以包含類呈現(xiàn)的兩種不同顯示狀態(tài)之間的動畫效果
如部分方法說明所示，還有一些可與其他效果方法聯(lián)合使用的動畫效果。這些效果包括 Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide 和 Transfer。另外利用 jQuery 插件，您還可以輕松應用其他一些高級技術。
與 jQuery UI 庫中的其他內容相同，效果的應用非常容易，只需在 Web 頁面中定位一個 HTML 元素或元素組，然后應用恰當?shù)姆椒纯伞Ｇ鍐?7 展示了如何對示例 Web 頁面中各 portlet 內容應用的方法，以使用 Toggle 效果。在這個例子中，Toggle 效果是通過雙擊一個 Portlet 的標題觸發(fā)的，這會導致內容在隱藏和顯示之間切換。
清單 7. 應用 Toggle 效果隱藏和顯示 portlet 內容
<script type="text/javascript">
$(function(){
$( ".portlet-header" ).dblclick(function(){
$(this).parent().find(".portlet-content").toggle();
});
});
</script>
portlet 的內容是通過遍歷標頭元素實現(xiàn)的，隨后利用 jQuery find 方法定位帶有 portlet-content 類的相關元素。
結束語
利用 jQuery UI 增強 Web 頁面非常簡單，基本上只需要包含恰當?shù)奈募?，并?zhí)行一次函數(shù)調用即可。在 jQuery 和 jQuery UI 這樣的庫出現(xiàn)之前，構建高度交互式的界面極為困難，因為必須從零開始編寫代碼，而且需要執(zhí)行大量測試來保證代碼能在所有主流瀏覽器中正常工作。如今，您只要包含一個文件并執(zhí)行一次函數(shù)調用即可創(chuàng)造效果和可排序的元素，或者更改主題。
以上就是本文的全部內容，希望對大家的學習有所幫助
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試