使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

简介： 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说，他们还不习惯去考虑应用程序基本的外观，因为这些以前都是由操作系统来处理的。了解 jQuery UI，一个基于 jQuery 的 UI 工具箱，使创建漂亮的界面更为容易。本文同时也介绍了一些 jQuery 插件，可以加速 Web 开发并有助于创建我们所熟悉的，且流畅、直观、灵活的界面。

简介

如果您是一个传统桌面应用程序开发人员，并且正在转向开发 Web 应用程序，在学习 HTML 和 CSS 方面您可能不会遇到什么困难，但为应用程序设计一个漂亮的外观可能会是一个挑战。jQuery UI 和各种 jQuery 插件对于快速将 Web 应用程序组合在一起有极大的帮助，只需在 GUI 设计上花费少量的时间。

JavaScript 和 jQuery

如果您希望页面有任何形式的动态内容或者交互，那么 JavaScript 一直是构建 Web 页面的一个固有部分。如果没有 JavaScript，您想要在运行时更新页面，都必须刷新页面，这会导致界面不便于操作。在最近几年中，JavaScript 日益重要，因为它使得 Web 应用程序变得更加强大。JavaScript 甚至通过像 Node.js （一个服务端 JavaScript 引擎）这样的技术，在服务端也能找到一席之地。如果您想温习 JavaScript 的基本内容以及了解关于 Node.js 的更多信息，请查看 参考资料 的链接。

jQuery 是一个主要使用客户端 JavaScript 代码的库。它可以大幅度提高编写 UI 代码的速度，并提供了许多常用操作的快捷方式。它还包括了一个灵活的、用于创建动态界面并且浏览器兼容的 Ajax 库。更多信息链接请查看 参考资料，包括该库开发版和产品版拷贝的下载链接。产品代码已经是 “最小化的”，这意味着所有不必要的空白和注释都被删除了。如果您想了解该库的内部实现，那么强烈建议使用开发版拷贝，因为它更容易阅读。在使用任何第三方库之前，您都需要对其进行审查，以保证您理解并喜欢它的质量和功能。

jQuery UI

jQuery UI 是一个 UI 小部件和 CSS 样式表的集合，它们被打包到一起以完成常用的任务，例如通过 JavaScript 和 CSS 来创建一个向用户提示信息的自定义窗口，而不是使用旧有的弹出窗口。当您访问 jQuery UI 网站时（链接请查看 参考资料），您会发现并没有直接下载的选项。相反，网站提供了一个构建自定义下载的链接。点击该链接，您可以组装适合您自己的个性化包，您可以去掉任何不需要使用的组件（例如 Accordion 或者 Datepicker 小部件）来缩小库的大小。

当您下载自己的 jQuery UI 包时，还需要注意其他一些文件。development-bundle 目录下包含了 demonstrations和documentation，它们虽然有用但不是产品环境下部署所必需的。但是，在 css 和 js 目录下的文件，必须部署到您的 Web 应用程序中。js 目录包含 jQuery 和 jQuery UI 库；而 css 目录包括 CSS 文件和所有生成小部件和样式表所需的图片。

内容主题/皮肤

jQuery UI 除了提供从主页上组装下载之外，您还可以选择使用某个特定主题。为了节省时间，jQuery UI 页面提供了一个工具，可以用来查看网站当前可用的不同主题，或者您也可以在网站上通过指定喜欢的颜色，来创建属于您自己的主题。这样做主要是为您自动组装所需的 CSS 设置，以便节省一些时间。例如，图 1 展示了 Humanity 主题（顶部）与 Start 主题（底部）的对比。每个主题都包括所有对应的图标集合。

图 1. Humanity 主题与 Start 主题的对比 

主题提供了一个简单获取所有美观的 UI 组件的方式，而无需您花费大量时间修改 CSS 值或者使用图片编辑器制作静态图片元素。本文中的示例使用了 Humanity 主题。但是，使用皮肤并不意味着您不能使用自己的 CSS 来满足或者重写 jQuery UI CSS。清单 1 提供了一个基本的使用 jQuery 和 jQuery UI 的 HTML 模板，并且包括了一个自定义的 CSS 文件，app.css，其重写了按钮中文本周围的空间大小。它还包括了app.js，您可以在此编写特定于应用程序的 JavaScript 代码。
清单 1. 一个加载 jQuery UI 的基本 HTML 模板

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
04 <head>
05 <link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css"/>
06 <link rel="stylesheet" type="text/css" href="css/app.css" />
07 <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
08 <script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
09 <script src="js/app.js"></script>
10 <body>
11 </body>
12 </html>
13  
14 app.css:
15 body {
16         font-size: smaller;
17 }
18  
19 /* Override jQuery UI theme's padding on buttons: */
20 .ui-button-text-only .ui-button-text {
21         padding: 0.2em 0.5em;
22 }

界面改进：Dialog 小部件

许多 Web 开发人员都热衷于使用 alert 或者 confirm 功能，以便为访问者提供（或者从访问者获取）消息。不过这些消息非常的不美观，尤其是它们通常包括一个诸如 “www.yoursite.com 的页面……” 的标题，实在不够醒目。另一个常见做法是打开一个弹出窗口。这个方法由于弹出窗口拦截器的问题，使用的越来越少，不过它也有些过时。

使用 jQuery UI Dialog 功能，当您需要与某个访问者交互时，您可以展示任意内容或者一个通过 display:none 隐藏了的预定义<div> 标签。图 2 显示了该功能在整个外观上的不同。
图 2. 对比一个普通的 alert 窗口和一个 jQuery UI Dialog 小部件 

在显示内容的文档中，当有一个独立的 <div> 标签时，使用 Dialog 小部件是最简单的。一般来说，只要有一个可重复用于对话框的空 <div> 标签，它就可以正常工作。首先，设置内容，然后显示对话框，如 清单 2 所示：
清单 2. 显示一个 jQuery UI Dialog 小部件

01 <div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>
02  
03 JavaScript 代码:
04 $('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting
05    modal to true, you can require the user to dismiss this before interacting
06   with more of the page.');
07 $('#dialogHolder').dialog({
08   autoOpen: true,
09   title: 'Hello!',
10   modal: true,
11   buttons: {
12     "Go Away": function() {
13       $(this).dialog("close");
14     }
15   }
16 })

 

界面改进：Accordions 和选项卡

jQuery UI 引入了一个名为 Accordion 的小部件，它允许您拥有多个含有内容的区域，但是一般情况下，只有一个区域是可见的（默认）。点击其他区域，会通过一个动画效果来隐藏可见区域，然后显示新的区域。Accordion 的一个优点是几乎能够拥有无限个部分，因为多余的是按照垂直排布的。这个功能提供了一个流畅并且简单的界面。

许多网站访问者对传统的选项卡式的布局更加熟悉。这里，当前选中的选项卡是可见的，而其他选项卡是隐藏的，因为受到水平宽度的限制，所以有效地限制了选项卡的个数。图 3 显示了一个 Accordion 小部件（顶部）和一个 Tab 小部件 （底部）。

图 3. jQuery Accordion 和 Tab 小部件 

Accordions 通过一个含有多个区域序列的 <div> 来创建。每个区域由一个 <h3> 以及一个 <a> 标签开始，随后是一个含有每个 accordion 区域内容的子容器 <div> 。类似的，选项卡控件也使用了一个含有其他内容的 <div>，然后使用一个 <ul> 标签来定义 选项卡。在每个 <li> 中，使用了一个锚标签 （<a>）将选项卡绑定为 <div> 的内容。 接下来，是一系列定义了实际内容的 <div>元素，它们的 id 与无序列表（<ul>）相对应。查看 清单 3 更容易理解。一旦内容定义完毕，就可以在相应 <div> 元素的 jQuery 选择器上，通过调用 .accordion(); 或者 .tab(); 来初始化 accordion 或者选项卡功能。
清单 3. 创建一个 Accordion 小部件和一个 Tab 小部件

01 <div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
02   <h3><a href=#">Top Section</a></h3>
03   <div>
04     <p>Initial content for the first "tab" of the accordion goes here.</p>
05   </div>
06   <h3><a href=#">Next Section</a></h3>
07   <div>
08     <p>More content...</p>
09   </div>
10   <h3><a href=#">Last section</a></h3>
11   <div>
12     <p>You can have as many accordion sections as needed.</p>
13   </div>
14 </div>
15  
16 <div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
17   <ul>
18     <li><a href="#t1">First Tab</a></li>
19     <li><a href="#t2">Middle Tab</a></li>
20     <li><a href="#t3">Last Tab</a></li>
21   </ul>
22   <div id="t1">
23     <p>First tab content goes here. The anchor href for the tab titles must
24        match the div for the content.</p>
25   </div>
26   <div id="t2">
27     <p>Second Tab Content</p>
28     <br />
29     <img src="http://www.google.com/images/logos/ps_logo2.png" />
30   </div>
31   <div id="t3">
32     <p>As with the Accordion, you can have as many tabs as you want, although
33        horizontal width places some practical limit there.</p>
34   </div>
35 </div>
36  
37 in JavaScript code:
38 $(document).ready(function() {
39   $('#accordionDemo').accordion();
40   $('#tabDemo').tabs();
41 }

 

小部件： Progressbar

jQuery UI 还提供了一个进度条小部件，用于需要长时间运行的操作。这个小部件十分易于使用。定义一个带有 ID 但是没有内容的<div> ，然后在其上调用 progressbar 方法；例如 $('#yourDiv').progressbar();。在实际中，这个小部件可以与 Ajax 结合使用来反映一个操作的进度。

小部件： Datepicker

一个对于输入的日期格式有严格要求的网站会令人反感，尤其是访问者来自不同的国家（有各自的日期格式）。但是使用一个可以接受任意格式的输入框也是危险的，需要进行后端验证，并且当输入的日期无法解析时，还要有办法通知访问者。一个简单的解决方案是使用一个日期选择小部件，正如 jQuery UI 所提供的。它有广泛的功能，包括限制日期范围，重新对日历上的日期命名（用于国际化），以及其他功能。它使用起来很简单。创建一个如下所示的标准文本输入框：

 

1 <input type="text" id="dateDemo" size="10">

 

然后使用如下代码将其转变为一个日历：

1 $('#dateDemo').datepicker({ 'maxDate': '+4m'});

 

上面的代码定义了一个最大日期，即从当前时间开始后的四个月（撰写本文时为 2011 年 3 月 5 日）。截图 图 4 反映了这一点。

图 4. jQuery UI Datepicker 小部件

使用 jQuery 动画

jQuery 自身提供了使用 animate 的能力，可以实现将任意属性从一个值过渡到其他值的动画效果。 当您定义自己的动画效果时这个功能很有用。但是通常编写自己的动画效果会花费很多时间。jQuery UI 添加了一些预定义动画，包括 stand-alone effects Bounce、Highlight、Pulsate、Shake、Size 以及 Transfer，以及其他例如 Blind Clip、Drop、Explode、Fade、 Fold、Puff、Slide 以及 Scale 等 Show 和 Hide 效果。这些效果都用于常用的 jQuery show 和 hide 方法；例如， $('#googleLogo').show('slide', {}, 1000); 或者 $('#googleLogo').hide('explode', {}, 2000);。

jQuery 插件

第三方已经为 jQuery 开发了大量的插件。虽然这些插件都需要 jQuery，但是它们通常都独立于 jQuery UI，不需要 jQuery UI 也可以使用。我们来看一下一些特别有用的插件。

Simple Tree

自从 Microsoft® Windows® Explorer 第一次出现以来，基于树的菜单就流行起来。它是一种在复杂资源集合（例如文档）中导航的简单方式。jQuery Simple Tree 插件可以很容易的实现树状菜单，并且在点击时支持任意 JavaScript 动作。如果需要，插件还可以支持拖拽树的项（item），对其重新组织，并在放下时触发一个方法。（下载链接请查看 参考资源 ；所有所需的组件可以在 下载 一节的样例代码中找到。）图 5 显示了使用中的 Simple Tree 插件。

图 5. The Simple Tree jQuery 插件 

树的内容通过一个单独的外部 <ul> 元素来定义，包含一个定义了树的 ID，以及用于样式化的 CSS 设置。在其内部，使用一个 <li>元素来定义一个根项。在这个元素内部，放置了另一个 <ul> 元素，以及位于该元素中的树项（每一项都在其自己的 <li> 元素中）。清单 4 说明了这个布局。当完成后，调用 simpleTree 方法来激活树功能。
清单 4. 使用 Simple Tree 创建一个树菜单

01 <head>
02   <link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
03   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
04   <script src="js/jquery.simple.tree.js" type="text/javascript"></script>
05 </head>
06 <body>
07   <ul id="treeDemo">
08     <li><span>Here are some items.</span>
09       <ul>
10         <li id="TopmostBranch"><span>Top Branch</span>
11           <ul>
12             <li id="SubItem1"><span>Sub items</span></li>
13             <li id="SubItem2"><span>are in another</span></li>
14             <li id="SubItem3"><span><ul> level.</span>
15               <ul>
16                  <li id="SubSubItem1"><span>like this!</span></li>
17               </ul>
18             </li>
19           </ul>
20         </li>
21         <li id="AnotherBranch"><span>Another Branch</span></li>
22         <li id="LastBranch"><span>Last Branch</span></li>
23       </ul>
24     </li>
25   </ul>
26 </body>
27  
28 in JavaScript code:
29 $(document).ready(function() {
30   $('#treeDemo').simpleTree({
31   autoclose: true,
32   afterClick: function(node) {
33     alert($('span: first',node).parent().attr('id') + " was clicked.");
34   },
35   animate: true,
36   drag: false
37   });
38 });

 

Uploadify

Uploadify jQuery 插件允许您将文件上传到您的网站，而不需在一个新的页面进行 POST 操作，并且在文件上传时显示一个进度条指示。上传自身是通过一个 Adobe® Flash® 组件来处理。该工具允许大量的自定义，包括指定允许的文件扩展名、大小限制、以及是否允许一次选择多个文件。当每个文件上传完成后，会调用 onComplete 方法；当所有文件完成后会调用 onAllComplete 方法。 Uploadify 默认的上传处理程序会在响应中返回已上传的文件名，但是这个处理程序可以很容易的进行定制化，以满足您的需要（例如，将一个文件上传到一个论坛或者执行其他动作）。清单 5 显示了如何使用 Uploadify 来创建一个文件上传。
清单 5. 将一个标准的文件输入转化为 Uploadify 上传程序

01 <head>
02   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
03   <script src="uploadify/swfobject.js" type="text/javascript"></script>
04   <script src="uploadify/jquery.uploadify.v2.1.4.min.js"type="text/javascript"></script>
05 </head>
06 <body>
07   <div style="margin-left: auto; margin-right: auto; width: 200px">
08     <b>Upload a file to test:</b> <input id="uploadifyDemo"
09        name="uploadifyDemo" type="file" />
10   </div>
11 </body>
12  
13 in JavaScript code:
14 $(document).ready(function() {
15   $('#uploadifyDemo').uploadify({
16     'auto': true,
17     'folder': 'tmp',
18     'cancelImg': 'uploadify/cancel.png',
19     'script': 'uploadify/uploadify.php',
20     'uploader': 'uploadify/uploadify.swf',
21     onComplete: function(evt, id, file, resp, data) {
22       alert('The file "' + file['name'] + '" with size "' + file['size'] +
23             '" was uploaded. (It will be deleted in a few minutes
24             automatically.)' + "\n\nThe upload script returned: " + resp);
25     }
26   });
27 });

 

保证您的上传目录不能被公共访问或者被很好的保护是一个很好的做法。如果不这么做，可能会导致攻击者上传他们自己的代码并在您的服务器上执行。在这个示例中，文件被写入到文章示例目录下的 tmp/ 目录中，因此您只需要编写一个.htaccess 规则，禁止所有访问者访问 tmp/ 目录。此外很重要的一点是，保证运行您 Web 服务器的用户（例如www-data 或者 apache）拥有上传目录的写权限。

Simpletip

不管是桌面还是基于 Web，任何应用程序对用户来说都应该是可以自助生成文档的，以方便用户使用。Tooltips 是实现这一点的一个快速的方式。在使用 tooltip 几十年后，大多数人在不确定“pf ”是什么时，都会不自觉的将鼠标停留在屏幕上某一项，等待一些弹出帮助。Simpletip 插件使这很容易做到。通过 Simpletip，您可以创建基本的工具提示或者使用其他选项来控制位置。它还支持显示和隐藏工具提示的效果，包括通过一个 JavaScript 方法自定义的动画效果。通过使用$('#elementId').html()，工具提示的内容可以来自于硬编码的文本或者其他一些页面内容，例如一个隐藏的 <div>元素。您也可以通过编程的方式，编写类似$('#simpleTip3').simpletip({ content:getToolTip()}); 的代码，使用 Ajax 或者从文档中的其他来源来获取内容。 清单 6 展示了在句中单词上使用工具提示的不同样式。
清单 6. 使用 Simpletip 创建一个工具提示

01 <head>
02   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
03   <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
04 </head>
05 <body>
06   <p>
07     SimpleTip lets you add <a id="simpleTip1">simple tooltips</a>,
08     including <a id="simpleTip2">more advanced</a> tooltips or even
09     <span id="simpleTip3">tooltips with effects</span> with a minimum of fuss.
10   </p>
11  
12   <div id="simpleTip2Content" style="display: none;">
13     <div style="padding: 5px;">
14       <b>Fancy</b> content can be defined in a separate div.
15     </div>
16   </div>
17 </body>
18  
19 in JavaScript code:
20 $(document).ready(function() {
21   $('#simpleTip1').simpletip({
22       content: 'A basic tooltip.',
23       fixed: false
24   });
25  
26   $('#simpleTip2').simpletip({
27       content: $('#simpleTip2Content').html(),
28       fixed: true,
29       position: ['100', '0']
30   });
31  
32   $('#simpleTip3').simpletip({
33     content: 'Some content to animate',
34     hideEffect: 'slide',
35     showEffect: 'custom',
36     showCustom: function() {
37       $(this).css({
38         display: 'block',
39         fontSize: '0.3em',
40         color: '#0000ff',
41         backgroundColor: '#ffffff'
42       });
43       $(this).animate({
44         color: '#ff0000',
45         fontSize: '1em'
46       }, 400);
47     }
48   });
49 });

结束语

通过使用本文中描述的工具，您可以为您的 Web 应用程序快速创建可视化控件，并将精力关注于网站的实际功能。您还需要仔细考虑自然的页面流程，以及应用程序中每个页面的可用性，即使使用了 jQuery UI 和这些插件，仍需要仔细设计页面。但是，它们可以提高开发速度并简化实现。要下载包含本文中所有样例代码的完整 Web 页面，请查看 下载 一节。欢迎您使用它开始构建您的项目。

来自: blog.jobbole.com

posted @ 2014-05-16 14:26  super1234  阅读(577)  评论(1)  编辑  收藏  举报