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