jQuery UI结合Ajax创建可定制的Web界面
如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如iGoogle、MyYahoo!和MyAOL）日渐普及，大多数Web应用程序内甚至也整合了类似的功能。jQuery库简化了此类复杂JavaScript交互的编写，随着jQueryUI的引入，这项功能得到了进一步的简化，该库以易于访问的jQuery插件的形式提供了常用用户界面类型。
本文介绍了如何利用Ajax和jQueryUI创建具有各种定制功能的高度可定制的UI。您将了解如何定制Web页面的各个方面，以及如何使用Ajax保存首选项。此外，您还将利用拖放操作等技术来排序列表项，以及组织页面元素和UI小部件来切换主题和配色方案—一切都能在单独一个Web页面中完成。
创建定制UI功能
jQueryUI是一个UI库，其中包含易于编写的交互、动画和效果，还包括可轻松定制主题的小部件。您可以对下载进行定制，选择您希望包含的主题，还可以提取组件，例如UI内核（必需）、交互、小部件或效果。要使用jQueryUI，您还需要最新版本的jQuery库。下载部分包含此库，但您也可以在稍后需要更新此库时直接从jQuery网站下载最新版本的库。清单1展示了如何在Web页面中包含jQueryUI库和其他必备文件。
清单1.创建包含jQueryUI代码的Web页面
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title> CreatingCustomizableWebInterfaceswiththejQueryUIandAjax </title> <linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet"/> <linktype="text/css"href="css/custom.css"rel="stylesheet"/> <scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script> <scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js"> </script> </head> <body> </body> </html>
所包含的第一个CSS提供了所选主题ui-lightness的代码。这是默认主题，是在jQueryUI下载过程中选定的，但您可以将其更改为所提供的任意主题。如果您已经下载了该库，希望更新正在使用的主题，只需访问ThemeRoller，从库中下载现有主题即可，也可以利用它来定制您自己的主题。代码中包含的第二个CSS提供了定制类，用于设定页面样式，或者覆盖所选主题内使用的属性。最后，代码中包含的JavaScript文件是jQuery和jQueryUI库。
利用jQueryUI创建拖放式界面
拖放功能如今越来越常见，可用于排序列表和组织页面元素，许多Web应用程序的个性化主页中也使用了这种功能。jQueryUISortable插件提供了为Web页面添加可排序功能的快捷方法，带有许多选项和事件，支持您按照自己希望的方式定制交互。
清单2中的示例展示了如何利用Sortable插件创建简单的可排序列表。您可以利用此插件让简单的HTML列表成为可排序的拖放式列表。首先要为此列表添加一个标识符—本例中指定sortable作为ID，以便使用jQuery轻松找到此列表，并为其添加可排序函数调用。还要为各项添加ui-state-default类，以便保持其样式与所选主题一致。
清单2.利用jQueryUISortable插件创建一个简单的可排序列表
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>
CreatingCustomizableWebInterfaceswiththejQueryUIandAjax
</title>
<linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet"/>
<linktype="text/css"href="css/custom.css"rel="stylesheet"/>
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<scripttype="text/javascript">
$(function(){
$("#sortable").sortable();
});
</script>
</head>
<body>
<h1>
CreatingCustomizableWebInterfaceswiththejQueryUIandAjax
</h1>
<ulid="sortable">
<liid="item1"class="ui-state-default">Item1</li>
<liid="item2"class="ui-state-default">Item2</li>
<liid="item3"class="ui-state-default">Item3</li>
<liid="item4"class="ui-state-default">Item4</li>
<liid="item5"class="ui-state-default">Item5</li>
<liid="item6"class="ui-state-default">Item6</li>
<liid="item7"class="ui-state-default">Item7</li>
</ul>
</body>
</html>
如果需要保存列表项位置，可能必须将详细信息保存到cookie或数据库，以便正确呈现页面，从而支持后续的页面查看。如果您使用的是数据库，就可以使用Ajax将此数据发送到服务器端脚本，使之能够将值写入数据库，并在随后初始页面加载时返回带有恰当位置的XML或JSON响应，以将各元素放置在正确的位置。清单3中的示例代码展示了如何将位置值发送到服务器端PHP脚本。
清单3.将位置值发送到服务器端脚本
$("#sortable").sortable({
stop:function(event,ui){
$("#sortableli").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.三栏拖放式界面
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>
CreatingCustomizableWebInterfaceswiththejQueryUIandAjax
</title>
<linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet"/>
<linktype="text/css"href="css/custom.css"rel="stylesheet"/>
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<scripttype="text/javascript">
$(function(){
$(".column").sortable({
connectWith:".column"
});
$("#sortable").sortable();
});
</script>
</head>
<body>
<h1>
CreatingCustomizableWebInterfaceswiththejQueryUIandAjax
</h1>
<ulid="page">
<liclass="column">
<divclass="portletui-widgetui-widget-contentui-helper-clearfixui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">ToDoList</div>
<divclass="portlet-content">
<ulid="sortable">
<liclass="ui-state-default">Item1</li>
<liclass="ui-state-default">Item2</li>
<liclass="ui-state-default">Item3</li>
<liclass="ui-state-default">Item4</li>
<liclass="ui-state-default">Item5</li>
<liclass="ui-state-default">Item6</li>
<liclass="ui-state-default">Item7</li>
</ul>
</div>
</div>
<divclass="portletui-widgetui-widget-contentui-helper-clearfixui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">Header</div>
<divclass="portlet-content">content</div>
</div>
</li>
<liclass="column">
<divclass="portletui-widgetui-widget-contentui-helper-clearfixui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">Header</div>
<divclass="portlet-content">content</div>
</div>
</li>
<liclass="column">
<divclass="portletui-widgetui-widget-contentui-helper-clearfixui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">Header</div>
<divclass="portlet-content">content</div>
</div>
<divclass="portletui-widgetui-widget-contentui-helper-clearfixui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">Header</div>
<divclass="portlet-content">content</div>
</div>
</li>
</ul>
</body>
</html>
为保持这些元素的样式与您选择的jQueryUI主题一致，您要使用某些CSS类将各元素定义为包含标头和内容的portlet。这些CSS类构成了jQueryUICSS框架，允许您轻松设定UI元素的主题。
jQueryUICSS框架
至此为止，您已经用到了jQueryUICSS框架中的一些类。在这一节中，我们将进一步探索，学习如何利用这些类让用户能动态更改其个性化仪表板页面的外观。该框架包含许多类，涵盖了常见的UI元素。应用这些类时，它们会根据您选择的主题自动为您的小部件设定主题。可用类的类别包括布局帮助元素、小部件容器、交互状态、交互线索、图标（包括状态、图像和图标类型）以及其他可视化元素，例如圆角帮助元素、覆盖和阴影。
使用该框架中的类时，可以轻松在可用主题间切换。清单5展示了利用ThemeRoller提供的主题切换器工具能多么轻松地完成此过程。
清单5.用于为示例Web页面上的定制portlet添加主题切换器的JavaScript和HTML
<scripttype="text/javascript">
$(function(){
$('#switcher').themeswitcher();
$(".column").sortable({
connectWith:".column"
});
$("#sortable").sortable();
});
</script>
<divclass="portlet-content">
<scripttype="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<divid="switcher"></div>
</div>
</div>
清单5中的示例展示了您能多么轻松地为现有示例Web页面中的portlet添加主题切换器工具。通过为小部件包含相关JavaScript文件，并创建一个作为容器的<div>，即可轻松定位该<div>，并为其应用themeswitcher。这种做法会得到一个包含jQueryUI提供的可用主题的下拉菜单。选中一个主题时，整个页面将立即更新来匹配该主题。在允许用户定制其页面时，此类小部件非常有用，其选项甚至可以保存到前面叙述的数据库中，以保存元素位置（但这种工具本身已经拥有基于cookie的存储，在用户刷新页面时，此前用户选中的主题将仍然保持可用）。
该库还包含有用的预构建小部件，您可轻松地将其添加到自己的页面中。每个小部件均已结构化为您的自定义主题或者您选定的主题呈现。清单6中的示例展示了如何在页面中利用Tab小部件来为用户组织某些内容，并使用现有主题加以呈现。
清单6.在现有主题内添加jQueryUI小部件
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>
CreatingCustomizableWebInterfaceswiththejQueryUIandAjax
</title>
<linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet"/>
<linktype="text/css"href="css/custom.css"rel="stylesheet"/>
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js">
</script>
<scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<scripttype="text/javascript">
$(function(){
$("#tabs").tabs();
$('#switcher').themeswitcher();
$(".column").sortable({
connectWith:".column"
});
$("#sortable").sortable();
});
</script>
</head>
<body>
<h1>
CreatingCustomizableWebInterfaceswiththejQueryUIandAjax
</h1>
<divid="tabs">
<ul>
<li>
<ahref="#tabs-1">Portlets</a>
</li>
<li>
<ahref="#tabs-2">Profileinformation</a>
</li>
</ul>
<divid="tabs-1">
<ulid="page">
<liclass="column">
<divclass="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">
ToDoList
</div>
<divclass="portlet-content">
<ulid="sortable">
<liclass="ui-state-default">Item1</li>
<liclass="ui-state-default">Item2</li>
<liclass="ui-state-default">Item3</li>
<liclass="ui-state-default">Item4</li>
<liclass="ui-state-default">Item5</li>
<liclass="ui-state-default">Item6</li>
<liclass="ui-state-default">Item7</li>
</ul>
</div>
</div>
<divclass="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">
Header
</div>
<divclass="portlet-content">content</div>
</div>
</li>
<liclass="column">
<divclass="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">
Header
</div>
<divclass="portlet-content">content</div>
</div>
</li>
<liclass="column">
<divclass="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">
Theme
</div>
<divclass="portlet-content">
<script
type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<divid="switcher"></div>
</div>
</div>
<divclass="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<divclass="portlet-headerui-widget-headerui-corner-all">
Header
</div>
<divclass="portlet-content">content</div>
</div>
</li>
</ul>
<brclass="clear"/>
</div>
<divid="tabs-2">
<p>Showprofileinformationhere</p>
</div>
</div>
</body>
</html>
选项卡式界面包含一个作为容器的<div>元素，该元素具有选项卡的ID，还有两个用作实际选项卡的列表项，包含选项卡名称，两个带有ID的选项卡与选项卡列表项中的锚定标记匹配。如您所见，可以轻而易举地添加恰当的HTML，以显示选项卡和选项卡内容，随后还能轻松地将Tab小部件应用于选项卡容器。这将自动显示一个选项卡式界面，并根据您选择的类，应用已选主题。
使用效果增强UI
通过jQueryUI库可以利用许多类别的效果，其中许多过渡都是对现有jQuery方法的简单扩展。每个类别都包含带有自定参数的方法，例如：
Colortransitions:
------Animate.用于为一个Web页面实现动画和彩色效果
Visibilitytransitions:
------Toggle.开关一个元素的可视与否，隐藏或显示此元素
------Show.显示一个元素，可以使用下列任何动画类型实现动画效果
------Hide.隐藏一个元素，可以使用下列任何动画类型实现动画效果
Classtransitions:
------addClass.可用于为一个元素添加类，可以包含类呈现的两种不同显示状态之间的动画效果
------removeClass.可用于为一个元素删除类，可以包含类呈现的两种不同显示状态之间的动画效果
------switchClass.可用于在两个类之间切换，可以包含类呈现的两种不同显示状态之间的动画效果
------toggleClass.可根据元素中是否已经包含类来为一个元素添加或删除类，可以包含类呈现的两种不同显示状态之间的动画效果
如部分方法说明所示，还有一些可与其他效果方法联合使用的动画效果。这些效果包括Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide和Transfer。另外利用jQuery插件，您还可以轻松应用其他一些高级技术。
与jQueryUI库中的其他内容相同，效果的应用非常容易，只需在Web页面中定位一个HTML元素或元素组，然后应用恰当的方法即可。清单7展示了如何对示例Web页面中各portlet内容应用的方法，以使用Toggle效果。在这个例子中，Toggle效果是通过双击一个Portlet的标题触发的，这会导致内容在隐藏和显示之间切换。
清单7.应用Toggle效果隐藏和显示portlet内容
<scripttype="text/javascript">
$(function(){
$(".portlet-header").dblclick(function(){
$(this).parent().find(".portlet-content").toggle();
});
});
</script>
portlet的内容是通过遍历标头元素实现的，随后利用jQueryfind方法定位带有portlet-content类的相关元素。
结束语
利用jQueryUI增强Web页面非常简单，基本上只需要包含恰当的文件，并执行一次函数调用即可。在jQuery和jQueryUI这样的库出现之前，构建高度交互式的界面极为困难，因为必须从零开始编写代码，而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今，您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素，或者更改主题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。