使用 jQuery（中级），第 3 部分: UI 项目

文档选项 未显示需要 JavaScript 的文档选项 样例代码 英文原文

级别： 中级

Michael Abernethy, 产品开发经理, Optimal Auctions

2009 年 9 月 07 日

jQuery UI 包的目标是创建一组良好定义的、可靠的并且可以在 Web 应用程序中重用的用户界面小部件。最终目标是提供经过严格测试的小部件，它们将超越包含在 HTML Input 元素中的小部件，并减轻用户界面开发人员的负担。

简介

在本文发表之后，UI 项目 1.6 已经重命名为 1.7。

jQuery UI 项目是一个令人激动的 jQuery 子项目，它许诺在下一年实现快速增长。UI 库的扩展速度非常快，远远超过了 jQuery 核心库的增长，因为 UI 开发人员在每个发布版中都添加了许多特性和修复包。然而，有趣的是，UI 包是一个真正的关于用户界面的集合，并且可以划分为 3 个主要模块：小部件（Widget），它们包含预构建的可定制皮肤的用户界面，这些界面可以直接部署到 Web 站点；效果（Effect），可以在页面上操作的非常简单直观的东西（例如，颤动和爆炸等）；UI 包的最后一个方面是可以为预构建的小部件创建自己的 “主题”，让您下载的这些小部件就像专门为您的 Web 站点制作的一样。

jQuery UI 项目的历史是很有趣的，并且或多或少有助于解释为什么以这种方式构建这个项目，以及为什么该库的 3 个部分差别如此大。这个 UI 库在最初的时候（即 2007 年年末）仅是几个不同的插件。这些当时很流行、下载次数很多的插件是由 jQuery 社区的高手创建的。他们决定将这些流行的插件合并到一个更大的插件中，并提升为 jQuery 核心代码的官方扩展。这导致了在 2008 年年初发布 UI 1.5 版。然而，在这个合并的 UI 插件发布之后，尝试在自己的代码中使用该插件的开发人员认为（或抱怨）它虽然很好，但彼此的差别过大。毕竟这些插件是由不同的开发人员编写的，他们都有各自的风格。最后，jQuery 社区决定调整这 3 个插件，让它们具有统一的风格。这导致 1.5.x 版本的发布，您可以在 UI 库历史中看到它们。

不过，随着该 UI 库的 1.6 版本发布，所有代码重构工作将结束，并且兑现曾经的许诺，即实现一个风格和代码统一的 UI 库。这个发布版的一个缺点是 UI 团队决定从其代码库中删除几个小部件，以让 1.6 版本早日出炉。因此，虽然 1.5 版本多了 3 个小部件，但 1.6 版本应该更快，并且更简单。您可以考虑这种折衷是否适合您，但不要期望已删除的小部件再出现在未来的 UI 库中。

我们已经回顾了 UI 库的历史，现在可以探索它的优点了，以及了解为什么 jQuery 团队对此兴奋不已。我个人觉得比较令人激动的是该库的潜力。对于曾经使用过 Java™ UI 中的 AWT 的开发人员，他们肯定记得引入 Swing 时的兴奋情景，随着一组全新的小部件的引入，与用户界面打交道的开发人员能够适应吗？我将 UI 库的潜能 与 Swing 进行对比，因为它能够将一组更新的用户界面添加到 Web 设计中（即向 Web 设计器添加更多的复杂小部件），同时对它们的行为进行规范化。因此，尽管目前 UI 库包含的小部件数量还不是很多，但它有望在发布 1.6 版本之后的一年内添加 10 至 20 个新的小部件，而到时开发人员可以在 Web 应用程序中使用它们。

安装 UI 库

下载和安装 UI 库与安装 jQuery 核心代码或插件不一样。为了降低对网络流量和连接的需求，UI 团队创建了一个 Web 应用程序，您可以通过这个应用程序预先选择需要使用的 UI 库部分和压缩方式。然后，您可以直接下载该文件。这样做的好处是可以仅提供您需要使用的 UI 库部分，从而避免对应用程序性能产生影响。这样做的缺点是，如果您需要使用一个未包含在定制文件中的部分，那么就需要重新下载整个文件。这就像我们的生活一样，每个银币都有正反两面。

Effects

UI 库中的 Effects 模块包含可以操作页面元素的 “有趣” 东西。我用 “有趣” 形容它们，是因为从总体上看它们确实是一个随机的效果集合。这类似于将 Microsoft® PowerPoint 的所有效果浏览一遍，然后将一小部分制成 JavaScript 效果。这一小部分效果是如何选择的，我们完全不知道。这些很酷的效果对专业 Web 应用程序有多大作用还有待评定，但我要问的问题是应该在什么地方，以及什么时候使用它们。

不过好消息是它们易于使用。第一组效果帮助您隐藏/显示页面元素。它们只是扩展了 jQuery 库的内置 hide() 和 show() 函数，让您能够指定隐藏/显示效果的类型。您的脑海中可能已经出现我正在谈论的效果，我将在图 1 中通过过程图演示 Puff 效果，分别显示前、中、后 3 个阶段。

因为很难描述动画效果的外观，所以您需要从本文下载演示稿，查看实际的效果。不过，我可以给出生成图 1 中的静态图片的代码。您可以从代码中了解它是如何实现的。

				
$("#puffSample").click(function(){
   $(this).hide("puff");
});
   
$("#puffReappear").click(function(){
   $("#puffSample").show("puff");
   });

如您所见，现在的代码还没有什么新奇的地方。hide/show 效果的工作原理还是相当简单的。真正的挑战是找出如何在恰当时间以恰当的方式使用它们，而不是让用户感慨 “喔，这毫无必要！”

我们接下来查看 Effects 模块中包含的其他效果。这些效果更加实用，我能想象到如何在应用程序中使用它们，以改善用户体验（至少一部分效果能改善用户体验）。这里的效果也很难直接描述，因此我建议您从本文 下载 一些示例，以观察效果的实际运行情况。

这个模块中包含的效果确实能够引起用户对页面元素的关注，其中一些效果在这方面表现不错。这些效果分别是 “bounce”、“highlight”、“pulsate”、“scale”、“shake” 和 “size”。“bounce” 会让页面元素弹跳起来，就像它落在虚拟的 HTML 蹦床上一样；“highlight” 在黄色的背景中闪现元素；“pulsate” 让元素在可见和不可见之间切换；“scale” 将元素收缩 50%；而 “size” 让元素变长变平。它们就像 hide/show 一样容易使用。

				
$("#bounce").click(function(){
   $("#loginSample").effect("bounce");
   }); 

它们构成了 UI 库中的 Effects 模块，虽然它们在文字描述中并无新奇之处，但是也有一些非常酷的效果，如果您需要让页面产生爆炸效果，就可以使用它们。

互动-Interactions

最后，我将介绍比页面爆炸更令人兴奋的东西。Interactions 非常强大，您可以通过它决定拖动一个元素越过另一个元素会发生什么，将一个元素置于另一个元素之上会发生什么，以及使用两个 HTML 元素可以实现的其他有趣的事情。

通过 dragging/dropping 支持交互是 Web 应用程序设计的新领域。因为大部分用户都习惯于静态页面和静态页面元素，所以支持拖放交互的 Web 应用程序非常少。甚至支持这种独特交互的桌面应用程序也不多。但是这样的 Web 应用程序还是存在的，其中一个例子就是：Yahoo Fantasy Sports 页面几乎完美地利用了 drag/drop 模型，使用它们可以刷新队员、在挑选之前对运动员进行排序，并将运动员移动到裁员列表。即使您没有使用过 Fantasy Sports，我还是鼓励您试用它，看看它们的独特用户界面设计。这是我见过的在 Web 上使用 drag/drop 模型的最佳典范。

Interactions 模块包含 5 种类型的交互。前 3 种是：

• Resizable 让页面上的元素可以调整大小，从而允许用户改变它们的形状并调整页面上的其他元素。如果您正在创建带有多个 portlet 的Web 应用程序，那么这个交互是很有用的，它允许用户设计自己的 Web 页面。MyYahoo 和 iGoogle 都允许您定制自己的页面，但它们使用的定制方式是自的。您仅能以特定的方式定义一定数量的专栏。为什么不让用户 完全定义自己的页面？
• Selectable 允许对页面上的元素进行分组，然后让用户在每组中选择这些元素的子集。这种类型的交互对于创建定制列表或选择小部件十分有用。
• Sortable 界面。它允许页面元素以某种顺序吸附到指定位置。假如您有一个包含 5 行的表。通过利用 Sortable 交互，您可以将第四行拖动到第二行的位置，而剩余的行将自动进行排序。我鼓励大家仔细看看这 3 个交互，因为它们为开发人员创建小部件和 Web 应用程序交互提供一些新方式。

在这个小节中，我主要关注两个我认为对未来的 Web 应用程序比较有用的交互：

• Draggable
• Droppable

在接下来的例子中，我将同时使用它们，尽管这不是必须的。

在这个示例 Web 应用程序中，我将改变人们在线购物的方式。这里不是通过按下一个按钮来将商品放到购物车中，我希望通过 Draggable/Droppable 模拟人们购物时的动作，即将商品放到购物车中。用户将把需要购买的商品拖放到购物车中。当商品进入购物车之后，将自动更新购物车中的商品数量和总价。

我们看看完成这个交互所需的少量代码。（本文的末尾包含完整的样例代码）。

				
// First, set up the shopping cart
// Give the cart an ID that we can reference in the jQuery code
// Give each span an ID so we can easily update the text in it
<img src="cart.jpg" id=cart>
<p><span id=numItems>0</span> items in your cart.
<p>Your total is $<span id=totalPrice>0</span>.

// Each product has code that looks like this.  The entire product
// is wrapped in a DIV with a class of "product" and given a
// unique ID.  It also has a span that defines the price of the object.
<p><div class=product id=ban><img src="banana.jpg" align=left> Bananas
  <p>$<span class=price>1.99</span></div><br><br>

// define each DIV that has a "product" as "draggable"
// The draggable function has many options that define how the object
// will look and feel when dragged.  There are many options, most not
// covered here, but I put a sampling in to whet your appetite.
$(".product").draggable({
    'opacity': 0.3,  // make the object semi-transparent when dragged
    'revert': "valid", // snap the object back after it's been dropped
    'delay': 200, // delay 200 ms before starting to drag it
    'distance':4, // wait till it's been dragged 4 pixels before starting
    'helper':"clone" // keep the object where it is and use a helper to show dragging
});
   
// just like the draggable has many options, the droppable has many
// options as well.  These options provide a variety of ways
// to offer reinforcement to the user about how the draggable/droppable
// relationship is to work
$("#cart").droppable({
    'accept':".product",  // define which elements will trigger a 'drop'
    'activeClass':"border",  // what class to add to the droppable while dragging
    'drop': function(e,ui){  // this function gets called when something is dropped
        // update the number of items in the cart
        $("#numItems").text(new Number($("#numItems").text())+1);
        var ID = $(ui.draggable).attr("id");
        // get the price from the object just placed in the cart
        var price = new Number($("#"+ID + " .price").text());
        // update the total price in the cart
        $("#totalPrice").text(new Number($("#totalPrice").text())+price);
    }
    });

这就是所需的代码。创建这个示例非常轻松，我自己都感到惊奇。毫无疑问，由于使用这种交互创建用户界面非常简单直观，所以它将流行起来。这个小节提到的其他交互也同样很简单，并且您可以在 Web 应用程序中利用它们各自的特点。

Widgets

在介绍 UI 代码的最后一个小节中，我可以通过图片描述它们。对我而言，UI 库最令人兴奋的是它的 Widgets 模块，该模块包含预构建的、经过测试的小部件，它们涉及到开发人员需要经历的 Web 应用程序的各个方面。这些小部件节省了我们的时间，让我们能够上网冲浪或阅读像本文一样优秀的文章。我还建议您告诉您的老板，您正在苦心研究这些小部件，这样他就会认为您今年工作特别努力，并且给您升迁的机会。

这些屏幕截图获得 UI 主页的授权使用。

Accordian

accordian 插件将一个列表转变为图形表示，从而允许用户在列表的各个部分之间移动，每次仅能查看一个部分。在某些 UI 库中，这个小部件称为 “Outlook Bar”，因为它在几年前起源于该程序。使用这个小部件的一个最大误区就是查看多个部分。提供该功能的是另一个小部件。这个小部件一次仅能显示一个部分，并且能够在一个部分中包含许多信息，只要这些信息不依赖于另一个部分。

要使用这个小部件，必须正确设置 HTML。换句话说，在使用 accordian 小部件之前要先设置 HTML。这还考虑到所谓的 “渐进衰退” 理论，即使用户不使用 JavaScript，或使用 Internet Explorer 5 都仍然能够正确查看页面。在清单 4 的例子中，注意 HTML 是如何构造的，因为任何想使用这个小部件的用户都必须了解它。

				
// The  accordian relies on the UL, LI, and A tags to properly configure itself
<ul id="accordianExample" class="ui-accordian-container" style="width:400px;">
   <li>
       <a href="#">Title 1</a>
       <div>Your text would go here</div>
   </li>
   
   <li>
       <a href="#">Title 2</a>
       <div>More text</div>
   </li>

</ul>

// yes, it's this simple
$("#accordianExample").accordian();

活动条

				
<div id="sliderExample" class="ui-slider-1">
<div class="ui-slider-handle"></div>
</div>

// this will set up the slider
$("#sliderExample").slider();

// this will set the maximum and minimum values of the slider
$("#sliderExample").slider({
   min: 10,
   max: 20
});

// this will get the value of the slider
$("#sliderExample").slider("value");

DatePicker

				
<input type=text id=dateField>

// this will create a date picker, which pops up when the textfield gets focus
$("#dateField").datepicker();

// show the drop-down fields to let the user jump around months and years
$("#dateField").datepicker({
   changeMonth: true,
   changeYear: true
});

// show two months instead of one
$("#dateField").datepicker({
   numberOfMonths: 2
});

// because this widget has to support internationalization, it has a TON of
// functions that let you set every aspect of the calendar, to support any
// possible calendar settings.  (Although it doesn't look like the jQuery team
// felt it was necessary to support the Mayan calendar.  Guess 2012 is right
// around the corner.)
//
// This function lets you set the date format that will appear in the textfield.
$("#dateField").datepicker({
   dateFormat: 'dd/mm/yyyy'
});

// Gets the date back from the datepicker
var date = $("#dateField").datepicker("getDate");

进度条

				
<div id="progressbarExample"></div>

// make this div a progress bar
$("#progressbarExample").progressbar();

// start the progress bar
$("#progressbarExample").start();

// stop the progress bar
$("#progressbarExample").stop();

Dialog

对于一直学习本系列的人而言，Dialog 小部件和在 “使用 jQuery，第 1 部分：中级 jQuery：使用插件创建和扩展 jQuery 函数” 中见到的 BlockUI 类似。它们都执行对话功能，您可以根据需要选择其中之一。BlockUI 在控制外观上具有更大的灵活性，而这个 Dialog 小部件能够帮助您完成更多工作。

				
<div id="dialogExample" title="Example Dialog">Text here.  Warning!!</div>

// turn the DIV into a dialog
$("#dialogExample").dialog();

// open the dialog, then close the dialog
$("#dialogExample").dialog("open").dialog("close");

// make a dialog that the user can't drag around, is modal, and in the center of the page
$("#dialogExample").dialog({
    draggable: false,
    modal: true,
    position: "center"
    });

选项卡

Tabs 可能是这些小部件中最不受欢迎的一个。我从来没能让它很好地发挥过作用，并且发现它严重依赖于 CSS 才能正常工作。由于关于它的示例很冗长复杂，加上我对它有点偏见，所以就不在这里回顾它。就我个人而言，我认为自己创建一个 DIV 与使用这个小部件差不多一样容易。

ThemeRoller

这个 UI 库的最后一个方面是 “ThemeRoller”。这是一个奇怪的名字，但是如果您选择在自己的代码中使用这个库的小部件，它就非常有用。我猜测这个 UI 库的小部件的观感与您的页面当前的观感不协调。我还这样猜测，如果您打算使用这些小部件，那么肯定希望它们能融入到您的站点中。所以，这个 UI 库的创建者还创建了一个 CSS 生成器，并且不断改进它，从而让您可以修改这些小部件，使它们能够融入到您的站点中，然后保存 CSS 文件。生成的 CSS 让所有小部件与您的站点协调一致，让您能够更轻松的使用它们。

ThemeRoller 的许多好处之一就是允许您为一些东西创建 CSS，这个创建过程原来只有 CSS 专家才能完成。例如，它让您在小部件的任何部分指定圆形角，以及创建下拉阴影。它已经将 CSS 文件最棘手的代码编写部分移出 UI 库，让不熟悉图像艺术的开发人员能够轻松使用和修改小部件。ThemeRoller 并没有让您处理复杂的 CSS 文件，并最终得到一个难看的小部件，而是让您不需要编写代码就能轻松创建外观漂亮的小部件。

最后，ThemeRoller 附带了许多预构建的主题，您可以使用它们让小部件变得更生动。以我的经验为例，我发现预构建主题的外观比自己设计的要好得多。我不是将站点的 CSS 放入到 ThemeRoller 中，而是将 ThemeRoller CSS 放到您的站点中。考虑使用这种便捷的方式实现专业的 Web 应用程序外观！

结束语

现在，我们已经介绍了 UI 库。这个 UI 库是一个发展非常快的项目，并且通过不断改进提供更好的小部件。在上一年中，它取得了一个巨大的进步，即组合了 3 个流行的插件。我希望这种快速发展的势头能够继续保持下去，因为我盼望着看到这个库到底能够为开发人员提供多少东西。尽管我对 Effects 不是很有信心，但是 Interaction 和 Widget 模块为您在 Web 应用程序中使用这个 UI 库提供了大量让人信服的解释。

我在本文中介绍了 UI 库 1.6 版本的所有小部件。这 6 个小部件只不过是 UI 团队的第一批成果，它还将提供更多的小部件。您将有希望看到一些常见的桌面小部件，比如颜色选择器、时间选择器、自动下拉、菜单栏和工具栏等。正如我在许多文章中强调的一样，jQuery 团队的主要目标之一是让创建 Web 应用程序像创建桌面应用程序一样简单。我认为，用户很希望 Web 应用程序类似于他们的桌面应用程序，因为这样才符合他们的观感和使用习惯。

回页首

下载

	关于下载方法的信息

参考资料

• 下载 1.3.2 Minimized jQuery，它是撰写本文时最新的稳定发行版。
  
  
• 阅读完整的 jQuery API 页面，查看这个库中的所有函数。
  
  
• 下载 jQuery UI Library 获得本文介绍的所有小部件和效果。
  
  
• 访问 jQuery UI Demo 页面, 观看所有小部件的实际行为。
  
  
• 访问 ThemeRoller 页面，尝试亲自为小部件创建外观。
  
  
• 在 W3Schools 上详细了解 CSS、JavaScript 和其他 Web 语言的背景。
  
  
• 阅读介绍该库的前三篇 jQuery 系列文章。“使用 jQuery，第 1 部分”、“"使用 jQuery，第 2 部分” 和 “使用 jQuery，第 3 部分”。
  
  
• "Ajax 改造，第 2 部分: 使用 jQuery、Ajax、工具提示和 lightbox 改进现有站点”介绍了一些其他 jQuery 插件。
  
  
• developerWorks Web development 专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
  
  
• developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。

关于作者

		在 Michael Abernethy 的 10 年技术生涯中，他与各种不同的技术和客户机打交道。他目前是一家拍卖软件公司 Optimal Auctions 的产品开发经理。他现在专注于富 Internet 应用程序，试图同时实现应用程序的复杂性和简单性。他在空闲时常常带上自己最喜欢的书去墨西哥湾海滩度假。

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？

回页首