如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如 iGoogle、MyYahoo! 和 MyAOL）日渐普及，大多数 Web 应用程序内甚至也整合了类似的功能。jQuery 库简化了此类复杂 JavaScript 交互的编写，随着 jQuery UI 的引入，这项功能得到了进一步的简化，该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型。
本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可定制的 UI。您将了解如何定制 Web 页面的各个方面，以及如何使用 Ajax 保存首选项。此外，您还将利用拖放操作等技术来排序列表项，以及组织页面元素和 UI 小部件来切换主题和配色方案 —一切都能在单独一个 Web 页面中完成。
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 库。
拖放功能如今越来越常见，可用于排序列表和组织页面元素，许多 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 脚本。
$( "#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 允许使用多栏界面，在各栏间拖动和排序元素。
<!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 小部件来为用户组织某些内容，并使用现有主题加以呈现。
<!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 小部件应用于选项卡容器。这将自动显示一个选项卡式界面，并根据您选择的类，应用已选主题。
通过 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 这样的库出现之前，构建高度交互式的界面极为困难，因为必须从零开始编写代码，而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今，您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素，或者更改主题。
相关推荐
借助jQuery UI和Ajax技术，创建高度可定制的Web界面成为了可能。jQuery UI是一个构建在jQuery核心库之上的用户界面工具库，它包括了一系列易于使用的UI元素，如按钮、对话框、拖放功能等。而Ajax（Asynchronous ...
在本项目中，“jQuery UI仿webqq桌面系统WebOS界面操作”是一个利用jQuery UI库创建的，模拟WebQQ桌面系统风格的Web操作系统界面。这个系统旨在提供一种类似于桌面环境的用户体验，用户可以通过浏览器进行交互，享受...
jQuery UI Messager是一款基于jQuery和jQuery UI库的插件，用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知，如警告、错误、信息和成功消息，增强了用户交互体验。这个...
【jQuery UI】是一种基于JavaScript库jQuery的用户界面插件集，它提供了丰富的组件和主题，用于...通过学习和研究这个项目，开发者可以深入理解如何用前端技术创建类似桌面应用的Web界面，并提升自己的前端开发技能。
7. **Ajax支持**：结合jQuery的Ajax功能，jQuery UI可以创建异步交互的界面，提升用户体验。 8. **无障碍访问**：jQuery UI组件遵循Web内容可访问性指南（WCAG），确保残障人士也能方便地使用。 9. **文件结构**：...
在Web开发中，JQuery UI是一个强大的JavaScript库，它提供了丰富的用户界面组件，包括对话框、拖放功能、日期选择器等。DWZ（Dynamic Web Zone）则是一个基于jQuery UI的前端框架，主要用于构建富交互式的Web应用。...
jQuery UI 是基于jQuery的用户界面库，它提供了许多可定制的组件和交互效果。 1. **部件（Widgets）**：jQuery UI 包含了如日期选择器（DatePicker）、对话框（Dialog）、进度条（Progressbar）、滑块（Slider）等...
jQuery UI 是一个基于 jQuery 库的用户界面库，它提供了丰富的交互效果、可重用的组件以及易于定制的主题，使得开发者能够轻松创建出功能强大且美观的Web界面。在本篇文章中，我们将深入探讨 jQuery UI 的1.12.1...
jQueryUI V1.12.1 是一个强大的前端开发库，它是基于JavaScript和jQuery的，专为构建交互式用户界面而设计。这个版本包含了jQuery V1.12.4，这是jQuery的核心库，提供了丰富的DOM操作、事件处理、动画效果以及Ajax...
1. 可定制性：jQuery UI允许用户根据需求选择需要的组件和主题，从而减小页面加载负担。 2. 组件丰富：包括日期选择器、拖放功能、对话框、进度条、排序列表等，覆盖了网页开发中的多种交互需求。 3. 主题Roller：...
**jQuery UI** 是基于 jQuery 的一套用户界面插件集合，它提供了一系列可定制的组件和视觉效果，如对话框（Dialog）、日历（Datepicker）、拖放（Draggable）和可排序（Sortable）等。这些组件极大地丰富了网页的...
总之，jQuery UI为Java Web开发者提供了强大且易用的界面构建工具，通过其丰富的组件和定制能力，能够快速打造专业且用户友好的应用程序。结合良好的编程实践和不断的学习，开发者可以充分利用jQuery UI的优势，提升...
标题中的"springmvc+maven+junit+jqueryUI"是一个典型的Web开发技术组合，涉及四个主要组件：Spring MVC、Maven、JUnit和jQuery UI。现在，让我们深入探讨这些技术及其在实际开发中的应用。 1. Spring MVC（Spring ...
在Web开发中，用户界面的交互性和数据验证是至关重要的，这正是jQuery UI和jQuery Validate插件所擅长的领域。这两个强大的JavaScript库为开发者提供了丰富的功能，使得创建功能丰富的、用户体验良好的网页变得更加...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了各种可重用、可定制的UI组件，用于创建交互式的网页元素。本篇文章将深入探讨jQuery UI Demo框架，以及它如何结合JSON实现数据的增删改查...
《jQuery UI 1.10.3：打造高效Web界面的实用工具库》 jQuery UI是基于jQuery JavaScript库的一个扩展，它提供了一整套可定制的用户界面组件，包括交互式控件、视觉效果和主题系统，使得Web开发者能够轻松构建用户...
在现代Web开发中，jQuery UI是一个强大的库，它扩展了jQuery的核心功能，提供了丰富的用户界面组件和交互效果。这个库特别适用于创建功能丰富的、用户友好的Java Web应用程序。jQuery UI包含了各种各样的可自定义的...
jQuery UI是一个建立在jQuery库上的组件集合，提供了丰富的界面元素和交互效果，如日期选择器、对话框和拖放功能。在这个登录系统中，jQuery UI可能被用来美化界面，例如使用其对话框组件来显示登录失败的提示信息，...
在Web开发领域，jQuery与jQuery UI是两个不可或缺的重要库，它们极大地简化了JavaScript的DOM操作和用户界面设计。本篇将深入探讨jQuery 1.11.0与jQuery UI 1.10.4这两个版本的功能、特性以及它们在实际项目中的应用...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它提供了丰富的交互效果和可定制的组件，如对话框、拖放功能...结合其灵活的主题系统和丰富的组件库，开发者可以快速构建出符合设计需求的现代Web界面。