如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如 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-def