jqueryjavascript八款web程序插件鼠标右键事件鼠标滚轮事件自定义弹窗风格

《jqueryjavascript八款web程序插件鼠标右键事件鼠标滚轮事件自定义弹窗风格》由会员分享，可在线阅读，更多相关《jqueryjavascript八款web程序插件鼠标右键事件鼠标滚轮事件自定义弹窗风格（17页珍藏版）》请在装配图网上搜索。

1、简介自我发表了有关jQuery JavaScript库的第一个系列文章（参见 参考资料）的这六个月来，在jQuery领域发生了很多事情。对我们这些jQuery的信徒而言，最令人激动的莫过于Microsoft?已经选择在其 Visual Studio 套件中使用 jQuery，并已经决定将 jQuery 作为目前该套件所包含的惟一的JavaScript库。这显示了对jQuery的极大支持，帮助巩固了jQuery作为适用于 Web应用程序的领先JavaScript库的地位。jQuery受欢迎程度不断攀升的另一个有力说明是更新后的Google Trends 图。我在之前的一篇文章中介绍过该图表，它展

2、示了 jQuery已经开始渐渐地从备用的这些JavaScript库中脱离出来。而六个月后，这种脱离更为明显，这一点从图1和图2 （忽略了 12份类似股票市场的下跌）所示的这两个更新后的Google趋势图中可以看出。图2. 2009 年1月常用 JavaScript 库的 Google 趋势图在这个由五篇文章组成的系列文章中，我将更进一步，讨论在使用jQuery中涉及到的一些属于中等级别的主题。该系列涵盖的主题包括插件及插件的开发、jQuery UI程序包、创建jQuery 小部件的一些较高深的主题、更先进的 Asynchronous JavaScript + XML (Ajax) 技术，最后，

3、还会对比JavaScript及其他库来介绍 jQuery的性能。本系列中的第一篇文章将讨论jQuery中所使用的插件结构。插件是jQuery比其他JavaScript库发展速度更快的最主要原因。由于插件广受第三方开发人员忠爱，到目前为 止，已经有上百个插件被开发出来，极大地丰富了jQuery功能。插件，从名字的字面意义不难看出，就是为了扩展jQuery的核心下载所固有的功能而插入”到jQuery的小部件或代码模块。插件社区已经开发出了上百个插件，这没有丝毫的夸大。无论您的 点遇到了什么问题，无论您(或您的客户)需要何种小部件，您都有可能在 中找到解决的办法。而且，插件库内所有的插件都是可免费下

4、载并能在您自已的 点上使用的。插件并不只限于用户界面小部件，此外还包括对jQuery语法的扩展、额外的及人们改进其开发过程所需要的其他一些创新。更酷的是人们已经将几个内置的JavaScript特性(例如，线程特性setTimeout()jQuery语法。这就为开发人员提供了一个纯jQuery松。Web站 jQuery插件库Web站Ajax函数以及 setlnterval()的开发环境，使处理与维护都更为轻)转换成了插件jQuery插件结构有很多优点。首先，它让您能够只使用jQuery核心以外的那些想要使用的小部件及函数。这在Web应用程序中非常重要，因为每附加一个插件都意味着下载和流量的增加。

5、通过允许您只使用那些希望使用的插件，您就可以更好地管理Web流量。其次，它使那些热情高涨的第三方开发人员可以创建自已感兴趣的小部件并通过创建他们自 已的插件来改进 jQuery函数，而不必尝试通过jQuery核心代码来实现其想法。这使得jQuery的使用者能用集体的创造力和创造热情来扩展这个库，这样一来，新想法和新小部 件的增长潜力几乎是无限的。这一点与封闭式的结构完全相反，后者需要jQuery团队审查和批准每个插件，这无疑会导致创建瓶颈。第三，这个由jQuery团队创建的插件架构，无论是对创建插件还是对使用插件的开发人员而言，用起来都很方便，这也是插件能够飞速发展的重要动力。然而，除了这些优

6、点之外，也有一个不好的方面：这些插件没有正式的测试结构。因此，虽然可以放心jQuery核心已经被仔细测试过，但是如若选择使用了一个插件， 也只能依靠第三方对其进行测试了。对于一个十分关键的Web应用程序而言，这个缺点应被予以重视。要使用一个插件，需要将其放在您的页面上，与对任何JavaScript文件所做的（包括jQuery文件本身）无异。因此，如果需要在页面上使用一个插件，可以将其添加在jQuery之后，如清单1所示。清单1如何包含一个插件本文不会对如何编写插件以及插件如何工作的细节做过多介绍。这些内容会在将来的一篇文章中介绍，在那篇文章中，您还会编写自已的新插件并将其放到实际的jQuery

7、插件存储库中。本文将着重探讨几个我比较喜欢的插件。这样做的目的不仅是为了向您展示我几乎每天都要使用的这些插件，还为了能够让您对 jQuery插件存储库中可用的东西有一个大致的概 念。我希望，借此能激发起您对插件的兴趣并自已去尝试使用它们。好，下面就开始介绍我所偏爱的插件。RightClick、ExtendedClick 与 WheelWeb应用程序的最主要目标之一就是让用户感觉他们像是在一个桌面应用程序上工作。换 句话说就是让 Web应用程序在视觉和感觉上都做到尽可能地与桌面应用程序一样。因此， 如果一个用户想要一个工具栏显示在其桌面应用程序上的某个位置，那么Web应用程序也应尽量把这个工具栏

8、放在同样的位置。这样就可以方便用户从桌面应用程序转移到Web应用程序，Web应用程序的成功机率也会更大。然而，Web应用程序中有一个与桌面应用程序不一样的地方，那就是对鼠标事件的响应。 也许您会对此心怀疑问，因为您的Web应用程序在您单击鼠标时工作得很好。当然，在大多数情况下，很多Web应用程序在处理鼠标左键单击事件时都会运行良好。实际上，多数人都习惯了只用鼠标的左键浏览Web站点，这时的 Web应用程序更像是一个Apple应用程序，只用一个键。但所有Windows? 应用程序都会使用两个鼠标键（有时甚至是3个键）。鼠标的左键用于激活命令，右键用于给出选项。 我们已经习惯了这种用法，那么为什么

9、还有这么多的Web应用程序忽略了鼠标右键呢。进一步说，Web应用程序也忽略了 CTRL+单击、Shift+单击与鼠标滚轮的操作。那么在忽略了这么多鼠标操作的情况 下，一个 Web应用程序如何能真正地仿效桌面应用程序呢？ 一个真正的Web应用程序应该充分利用鼠标的功用。要想弄清忽略鼠标右键单击的Web应用程序和没有忽略这些操作的Web应用程序之间的差别，以及额外的鼠标键如何能增强Web站点的功能，我们不妨比较一下GMail与Yahoo Mail。这里先对 GMail的粉丝们说声对不起，但在我看来，Yahoo Mail在这方面的确比GMail做得好。在 GMail中，对鼠标右键单击的处理与普通We

10、b页面没什么区别。因此，当右键单击 GMail中的一个消息时，它展示给您的只是诸如“ Back” “ In spectElement ”或“Select All之类的选项。这些动作与处理消息有什么关系呢？当然，这并不 是说鼠标右键在 GMail页面中没有任何作用。但我们与Yahoo Mail做一下比较，看看它是如何处理鼠标右键单击的。我们右键单击 Yahoo Mail页面中的一个消息时，呈现给我的是包括 打开” 打印”回复”和 删除”在内的选项。这些动作都是邮件应用程序中常用 的。这些选项就让一个典型的Web应用程序非常类似于您在桌面上经常用到的邮件应用程序（试着右键单击Outlook中的一个

11、消息，看看哪个Web应用程序所提供的选项更接近这些选项）。图 3和图4显示了右键单击选项的区别。图3. Yahoo Mail中的右键单击1OpenPrintiter1Ctrl+p Reply to Renderr Reply to Alla -ForwardlJSelect ARCtrl+ass Readk -Mari as UnreadShiftsFlag fbr Foiled -up1Clear RagShiftsDeleteThis is SpamAdd Sender to ContertsView Full Headers图4. GMail中的右键单击BackForwardReload

12、StopBoohnarkThis PageSaveA乩“Send Link.ss=Vi ew Background InnageSelect AJIThis Fra meView Page SourceView Pagelnfo第一个帮助解决Web应用程序中鼠标单击问题的jQuery插件是rightClick插件。它既能捕捉鼠标右键单击，同时还能捕捉鼠标右键按下与松开。它还有一个功用就是让您能够关闭特定于浏览器的右键单击上下文菜单。显示在FireFox （图4）中的右键单击菜单在您选择将其关闭后就不会再出现了，这就让您能创建符合自已习惯的右键单击菜单而同时还不会与浏览器的默认行为发生冲突。清单

13、2. rightClick 插件/ set up the div that will capture our events/ when the right mouse is clicked on this div, increase the width/ by 10 pixels.Also, do not show the browser-specific pop-up/ menu/ This, of course, should be in the $(document).ready function$(#rightClickSample).rightClick(function(e)$(t

14、his).width($(this).width()+10););$(#rightClickSample).noContext();现在，让我们来看看能扩展 Web应用程序中的鼠标功能的另外一个插件。这个插件具有捕捉Ctrl、Alt和Shift键的能力。一些应用程序(例如 Adobe Photoshop )经常会用到 这些键，所以有些人更愿意在使用鼠标时也能使用这些键。然而，借助jQuery核心代码来使用这些键非常困难，并且会增加额外的编码负担。为什么不使用预先做好的并经过测试的插件呢？exte ndedClick插件提供了代表不同帮助键组合的函数。这些函数包括 ctrlclick()shif

15、tclick()、altclick() 、ctrlaltclick()、ctrlshiftclick()altshiftclick()及ctrlaltshiftclick()。但美中不足的是，这些函数只能被关联到鼠标左键单击按钮，正如之前的右键单击示例中所展示的，忽略了鼠标的另一半不是明智之举。然而，到目前为止，还没有一个插件能将帮助键关联到右键单击，将两者相结合以及创建一个新插件的工作就留给有志之士去做了。让我们将右键单击的示例改掉，让div 在按下Shift+左键单击时增加10个像素、在按下Ctrl+左键单击时减少 10个像素。清单 3. extendedClick 插件/ set up

16、the div that will capture our events/ when the left mouse is clicked with the shift key held down,/ grow the div by 10 pixels$(#extendedClickSample).shiftclick(function(e)$(this).width($(this).width()+10););/ when the left mouse is clicked with the ctrl key held down,/ shrink the div by 10 pixels$(#

17、extendedClickSample).ctrlclick(function(e)$(this).width($(this).width()-10);)；能够消除桌面应用程序与Web应用程序差异的最后一个插件就是能够处理鼠标滚轮的这个插件。我敢打赌多数人都从来没遇到过一个允许使用鼠标滚轮的Web站点(除了 HTML输入元素)。但这也不意味着要在一个应用程序中使用鼠标滚轮完全不可能。鼠标滚轮在应用程序中的应用之一是能让您上传图片的Web站点，可以通过鼠标滚轮来对图片进行放大或缩小。诚然，在桌面应用程序上也可以使用这个功能，但是在大多数Web应用程序中仍然可以吗？未必。举个鼠标滚轮的例子， 让我

18、们用鼠标滚轮同样地控制div 值的增加/减少。当向上滚动鼠标滚轮时，div增加，当向下滚动时，div的值减少。如果您的鼠标没有滚轮的话，那么就可 以假设一下。清单4.鼠标滚轮插件/ set up the div that will capture our events/ attach an event handler for the wheel to this div/ notice that we use the e.delta to determine how many notches the wheel/ was moved. One notch is either 1 (if up),

19、 or -1 (if down).So, as/ a result, we can simply add it to the current width, letting the/ sign of the delta grow or shrink the div.$(#wheelSample).wheel(function(e)$(this).width($(this).width()+10*(e.delta);)；这三个插件，我感觉，在使Web应用程序能在感观上更接近桌面应用程序方面是非常重要的。与 Web应用程序进行交互时受到的鼠标左健单击的限制相反，这些插件允许Web应用程序捕捉所有形式

20、的鼠标交互，正如一个典型的桌面应用程序所做的那样。此外，由于插件的应用将在今后的几年中越来越普遍，开发人员将会肩负起将现有的桌面应用程序转换成 Web应用程序的责任。通过在 Web上提供用户在桌面上已有的所有的鼠标交互，这 些插件会使这种转换变得非常容易。blockUIblockUI是提供创建模式对话框功能的几个插件中的一个。也许您会说JavaScript已经提供了很多很酷的模式对话框，比如alert() 和confirm()。我不否认，无论是开发人员还是用户都非常喜欢这些模式对话框。它们在一个设计良好的Web站点上看起来的确不赖。然而，开发人员还有一个更好的选择，可以让您从用户那里收集信息并

21、使您的模式对话框在 Web应用程序上看上去也十分自然。注意，喜欢使用警告/确认的读者可以直接跳到下一节了。言归正传，警告/确认功能在模式对话框方面有很多缺陷。第一个也是最重要的一点就是， 除了在确认功能上的0K或Cancel夕卜，它们只能显示信息却不能收集信息。更理想的情况是弹出一个对话窗，能提供更多的灵活性，且允许向此对话框添加任何想要的元素。换句话说，这个对话窗与您在其他编程语言中使用的类似。在这方面，BlockUI是我最钟爱的一个插件，因它易于处理，而且非常灵活，便于在同一个 Web应用程序上处理很多对话框。 不仅如此，它还提供了很多不同类型的对话框供使用。在本文随附的示例代码（参见下载

22、）中，我使用 blockUI创建了一个模式对话框，如下所示，我稍候会对所涉及的代码和选项进行深入的介绍。图5. blockUI 示例 应 Biv. fShri-fe 皿Please M ait.The senrr Is crunching 迪 the nuubers. It should respond in a minute.正如在图5中所看到的，页面上有一个模式对话框。而对页面其他部分的输入则由对话框下方的半透明层所封闭，这有效阻止了用户除对话框本身之外与Web应用程序间的交互。实现这种封闭功能的代码使用了一个IFrame，但实际上问题不大，因为此插件作者已经在所有不同的浏览器上测试过并已

23、经确保此插件工作正常。创建对话框的第一步是指定其消息。一个消息可以是您想要显示给用户的任何文本（复制alert（） 函数），可以是向用户显示HTML，也可以是创建一个标记了的消息（使用粗体、颜色等）。不过，我认为此插件最有价值的一点是允许提供div作为消息，这就让您能够以自己想要的任何布局、任何数量的输入、按钮和所需信息来创建您自己的对话框。清单5. blockUI 插件/ this will create a dialog with our default text,/ effectively replicating the/ alert() function$.blockUI(messag

24、e: This is a sample dialog);/ however, we can add any HTML we want to the message, making it look closer/ to our own Web site/ $.blockUI(message: Sample DialogThis is our message);/ perhaps most importantly, we can add a div to the message, allowing/ us to create our own dialog, with the look, feel,

25、 message, and input we want LoginUsername: Password: / and the jQuery code to show this is pretty much the same $.blockUI( message:$(#loginMessage);有关blockUI只剩下两个很小的问题要讨论，之后，您就可以把它放在您自己站点上了。第一，我还没有关闭此对话框。这也是个小问题，对么？第二，我用清单5中的代码片段创建的所有对话框都具有默认的blockUI外观，而这不是我们想要的，因为此插件的一个很重要的卖点就是能为对话框创建个性的观感。不过，block

26、UI本身就带一段 CSS代码,您可以拿来放入到自己的 CSS文件并随意定制，这样一来，您就重新获得了让对话框以 您想要的方式显示的能力。不过，为了覆盖blockUI的CSS属性，必须要告知此插件去CSS文件内查找而不是使用其默认设置。清单6所示的是示例代码内的一个代码片段，这些代码显示了如何关闭对话框、如何使用您自己的CSS以及此CSS内可用的选项。清单6. blockUI插件的更多内容/ These two functions tell the BlockUI that/ you want to use your own CSS/ code to define how the dialogs

27、 will work. The first line/ tells it you want to use your own CSS for the dialog,/ the second line tells it you want your own CSS/ for the semi-transparent/ layer between the page and the dialog.$.blockUI.defaults.css = ;$.blockUI.defaults.overlayCSS = ;/ when the show button is pressed, well displa

28、y the dialog./ we want to display our own custom DIV.However, note here/ that we want to override the CSS-defined height and width./ After all, it would be difficult for an entire site to have/ predefined widths and heights if every dialog is slightly/ different.$(#show).click(function()$.blockUI( m

29、essage:$(#waitMessage), css: width:500px, height:160px););/ When the cancel button is pressed on the DIV dialog,/ we can close the dialog$(#cancel).click(function()$.unblockUI(););/ the CSS you can override to make it look good on your site div.blockOverlay-ms-filter: progid:DXImageTransform.Microso

30、ft.Alpha(Opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);-moz-opacity:.7O;opacity:.70;background-color: #228518;div.blockMsgwidth: 20%;top:20%;left:30%;text-align: center;background-color: #fff;border: 3px solid #044600;-moz-border-radius: 10px;-webkit-border-radius: 10px;-ms

31、-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-moz-opacity:1;opacity:1;padding: 15px;color: #000;以我的经验，此插件非常好用。当我想要替换JavaScript内的confirm() 时，我发现它很容易实现，更不必说它看上去有多好看了。此外，我还在更复杂的环境内使用过它，用它作为一个对话框来将文件上传到一个电子邮件应用程序，或者在一个照片浏览应用程序

32、内将其作为一个照片 lightbox。如果将其与 Ajax调用综合在一起，可以节省很多页面重载。借此，就能扩大屏幕区域以便显示信息。最后，它还去掉了警告/确认功能的限制，让您能以对话框的思路来设计您的软件，正如桌面应用程序那样。printAreaprintArea 插件在 Web应用程序也有独特的用途，而且我发现它很有用。其核心是让您能 够打印一个特定的HTML元素。与在 Web应用程序上进行打印的其他方式相比，它有一定的优势，原来在 Web应用程序上打印只能简单调用window.print()按钮，然后期待最好的结果。正如所有使用过In ternet浏览器的人会告诉您的一样，要让两个页面在不

33、同的浏览器上打印的结果完全相同不太可能。而且，若您想要在文本区域内打印出所有的文本，而没有任何其他内容的话，就会出问题。一直到现在，这都非常困难。正如我之前所述，此插件让您能够打印页面上的一些特定元素，而不会打印除了这些元素之外的其他元素。比如，我就曾经在一个电子邮件应用程序中使用过此插件，在我的应用程序中，我允许用户打印文本区域内所包含的消息。我还在显示报告的页面上使用过它，我不想让这些页面上的各种按钮和图形也与报告一同打印。人们熟悉的另一种情况就是打印飞机票。Web页面上的机票通常具有很多信息和图形，而打印出来的机票只需包含一个条形码和基 本的登机信息。清单7. printArea 插件A

34、n advertisement that you dont want printed out.Another advertisement that you dont want printed out.NameAgeHeightJohn Q2361Jane Q2351Jimmy R2356All the annoying disclaimer text you dont want printed out./ Capture the click on the Print button. Then, you can call the printArea()/ function on the prin

35、table div we used to wrap the portion of the page we want/ printed.The only thing that will get printed to the printer will/ be the table, and all the annoying text wont be. $(#printButton).click(function()$(#printable).printArea();)；该插件提供了一种十分简单直观的方式来控制页面上元素的打印。更妙的是，它在In ternetExplorer和Firefox这两种浏览

36、器上都工作得很好，并可用来控制页面如何在这两种浏览 器内打印出来，为您去除了许多让人头痛的问题。惟一的一个缺陷是它依赖于用户来按下您设置的Print按钮，或者页面上您所能控制的其他区域。如果用户单击了浏览器的Print按钮，它就会将用户带回到原来容易出现问题的打印功能。而且麻烦加倍，您将不能停止该打印按钮的执行，甚至会发出有关使用它的警告。所以，您只能期盼用户足够聪明来按下您自己的Print按钮。而其他的一些方式，则是简单地进行某些条件下的自动打印，而完全不 用用户参与。AlphaNumericPlus通常，在用户界面设计中， 要针对较少的用户假设来编写代码。一个减少用户假设的好例子是表单上文

37、本字段的处理。假设，已经设立了一个字段来获取电话号码，但您知道有些人会输入字母。您可以在三个地方阻止此不正确的输入。第一个地方是在输入进入数据库之前在服务器端检查错误的输入。因此，可以写一些Java? 代码或PHP代码来检查所有输入字段并决定哪些字段具有有效输入，哪些字段没有，如果它们无效，则向客户机发送回一个消息。 第二层错误检查是用 JavaScript在客户端进行检查。通过在客户端检查这些条件，就能节省网 络流量并能提供给用户更为快速的响应。最后一层错误检查是充分利用较少的用户假设”的 设计模式，该模式不允许用户输入任何坏的信息。我们这里所讨论的例子，为什么还要 向服务器发送字母作为电话

38、号码呢？或者为什么还要在提交此表单前让JavaScript检查有无字母呢？最好的方案就是根本不让用户键入任何字母。此插件就是构建在这样的一个理念上，即Web应用程序的文本字段应该只接受我认为合适的输入。所以，对于一个只能有数字的字段，我想要我的文本字段只能接受数字。如果我想要它只有字母，它应只能接受字母。您知道我的想法了吧？清单 8. AlphaNumeric 插件Alpha-only: Numeric-only: / This code will prevent unworthy characters from being entered / into our text fields, as

39、suring valid input $(#alphaOnly).alpha();$(#numericOnly).numeric();这就是标准 AlphaNumeric插件的全部了，但是我根据自己的需要对其进行了扩展，所以 我将在这里讨论这些附加内容（它们包括在下载部分）。我原来想既然我能控制输入只有字母或数字，我应该也能扩展到包括特殊字符，比如$、或&。有了这种推测，我就能根据它们在表单内的使用将这些特定的规则附加到文本字段。比如，一个被用于电子邮件地址的文本字段应该允许包括标准数字和字母在内的所有字符。所以，一个电子邮件地址字段应该接受_、-、和“。所有其他特殊的字符都是无效的，并且如果

40、这些字符用在了电 子邮件内，将会导致一个错误，所以我们禁止这些字符的键入。我们能100% 保证这是一个有效的电子邮件地址么？不能，用户还是会键入可笑的内容，比如“，但我们迈出了第一步。我向标准的 AlphaNumeric 插件添加的功能是用来处理十进制、货币、电子邮件、电话、 时钟和日期的。清单 9所示的就是我的代码。清单 9. AlphaNumericPIus 插件/ will only allow numerals and the ./ and , characters (because Im thinking international / here, and some countrie

41、s use a , for a decimal) $(#decimalOnly).decimal();/ same as the above, but it adds support for the % $(#percentOnly).percent();/ as described above, only allows valid e-mail characters $(#emailOnly).email();/ allows only numbers and the ( and ) and - characters $(#phoneOnly).phone();/ allows only n

42、umbers and the : character $(#clockOnly).clock();/ allows only numbers and the / and - characters $(#dateOnly).date();/ this is the only one thats slightly different, in that/ it requires you to pass in the valid currency symbol, so you can/ pass in a pound sign or euro if youre using this overseas

43、$(#currencyOnly).currency($);此AlphaNumericPlus 插件是防止用户无效输入的第一层保护。通过不允许特定条件下出现无效字符，它不仅能最小化错误的机率， 它还迅速向用户强调他们没有输入有效信息。所以，如果一个用户试图在一个电话号码字段输入一个字母，用户立即就会被通知出错了。 这种快速响应通常都会备受用户欢迎，因为用户无需等待到处理结束来修复所有错误。防止出错的第二个层面是基于表单提交的客户端检查。在这种情况下，可以检查数据是不是都处于有效格式；比如，检查电话号码是否具有正确数量的数字。防止出错的最后一个层面是服务器端检查，在此，可以进一步检查格式是否有效，

44、以及针对数据库内已经有的任何内容来检查信息。一个成功的三管齐下的方式才是最好的解决方案，其中由此插件充当第一道防线。虽然不完美（尽管所有字符都有效，您还是能输入一个无效格式），但它毕竟能将反 馈立即呈现给用户。计算我发现的另外一个在某些情况下很有用的插件是Calculation插件。与大多数优秀的插件一样，它也只是做几件事情，但是却做得很好。正如其名字所暗示的，它能计算字段内的数字并得出这些数的总和、平均数、最大数或最小数。它还能让您从一个字段解析一个数字。该插件如此棒的灵活性得益于其能对来自任何类型的元素的数字进行求和。所以，如果传递给它一个包含 DIV、INPUT TEXT 和SPAN的元

45、素数组，它将会找到这些字段内的数字， 将其转变为数字并返回总和。这在某些情况下非常有用，并能省去尝试对每个数字运算函数进行错误检查的大量烦恼。但是，关于此插件有一点需要注意，即它打破了标准的插件法则，即所有插件均返回此 jQuery对象本身。在本文所讨论的其他插件以及我处理过的所有其他插件内，函数返回 jQuery对象，这意味着它没有打破链”。而此插件则没有遵守。因为返回了数字，它打破了这条链，这样一来，在调用它之后，就不能再将这些jQuery函数串联在一起了。让我们来看此插件的一个稍加扩展的例子。图6所示的小部件具有一组允许用户输入百分比的字段。这个小部件检查所有字段加起来是不是100%，如

46、果不是，就会将百分比的总和用红色显示以表明错误。在财务计划页面很容易遇到这类小部件，让您决定在哪方面增加投入。图 6. 401k contribution小部件Entei 也e percentage aMocatzou you wish to plac e your401k contributions into All contribtitiorts muU add up to lOHS&P 50C Index5%Russell 200 Index32%MSCr International Index23%MSCI Emerging Market Index34%REIT Index0%Tot

47、al94 Vo清单 10. Calculation 插件/ Set up the table that contains the widget./ Note that we add a class to it called/ percentSimple, which will be used in the jQuery/ code, as well as adding a unique/ ID to the table sortTablel./ Also note that each text field that will have a percent/ typed into it has

48、the/ class of percent added to it./ Finally, note in the table footer a field called percentTotalid=sortTable1table width=300 class=percentSimplecellpadding=0 cellspacing=0S&P 500 Index %Total % / take advantage of our previous plug-in and limit the percent fields/ to just numbers$(.percent).numeric

49、();/ capture any keyup events from all the percent fields/ when these occur, we are going to recalculate the total percent$(table.percentSimple input.percent).keyup(function()/ figure out which table this occurred in (in case theres more than/ 1 widget on a pagevar table = $(this).parents().filter(t

50、able.percentSimple);var ID = table.attr(id);/ Find the sum of all the percent fields, by using/ our calculation plug-invar sum = $(# + ID + input.percent).sum();/ cache the span called percentTotalvar totalField = $(# + ID + .percentTotal);/ update the total in the percentTotal fieldtotalField.html(

51、sum);/ if the sum != 100%, then well attach an error to itif (sum != 100 & sum != 0)totalField.addClass(error);elsetotalField.removeClass(error););正如您所见，此插件的用途有限，但是它非常有效，而且若能正确使用还能节省很多时间。虽然我只包括了max/min、average 和sum函数，我仍能想象得到有人如何雄心勃勃地想要组合成一个完整的电子表格插件，其中包含Microsoft Excel应用程序内的所有函数。想象一下这个电子表格插件可以提供标准的d

52、eviation、payment以及future value （因为我经常接触金融问题，所以我对这些函数很熟悉）函数。此外，再想象一下此电子表格插件如何能被那些希望在其页面上提供基本的电子表格功能，或允许用户无需输入任何复杂公式就能创建各自类似电子表格页面的Web站点使用。Timeout/IntervalJavaScript让我最为头痛的事情之一就是其与常见的线程设计的不兼容性。当我从Swing的Java用户界面转向JavaScript Web 应用程序时，我发现我在JavaScript内找不到Java代码的多线程界面的替代物。相反，JavaScript使用setTimeout() 和setl

53、nterval()方法，这虽然有点类似于我在Java代码中习惯使用的线程设计，但并非完全相同。setTimeout() 方法接受一个字符串参数(充当回调方法)以及一个数字(充当超时，以毫秒为单位)。同样地，setl nterval()方法接受相同的参数，虽然此方法会不断地调用此回调方法，且以超时作为调用间的间隔。将之与Java线程设计做对比，后者让您能创建一个线程对象，然后在相同的对象上调用start() 和stop()，控制其何时运行，并在这个类定义内定义这个run() 方法，不难看到这两个设计之间的不同。JavaScript线程设计让您能轻松启动线程，但它有时很难停止它们。这是因为Java

54、Script线程设计依赖于ID来停止 超时/间隔。这些ID是从setTimeout/setl nterval函数传递回来的。如下所示。清单 11. JavaScript 线程/ creates a thread with ID of threadID,/ which will call myCallBack()/ every 1 second (1000 ms = 1 sec)var threadID = setInterval(myCallBack, 1000);/ will stop the thread from calling myCallBack() clearInterval(th

55、readID);清单11所示的代码其实并不实用，因为在此线程运行之前，您可能就将其关闭了。调用 setInterval() 为 setInterval()，并且在下一行上调用clearI nterval()不起任何作用，因清单 12. JavaScript线程的更多内容调用后没有暂停。解决方法如清单12所示。$(document).ready(function() / store the ID as a global variablevar threadID;/ creates a thread with ID of threadID, which will call myCallBack()

56、/ every 1 second (1000 ms = 1 sec)threadID = setInterval(myCallBack, 1000);/ will stop the thread from calling myCallBack()$(#hypotheticalStopButton).click(function() clearInterval(threadID);)；这段代码应该会工作，因为它将threadID存储为一个全局变量，能在JavaScript代码的任何地方引用。这种解决方案对于简单的例子尚可，但是若您开始向Web应用程序引入更多线程并且交互变得更为困难的话，又该如何

57、呢？具有大量全局变量的JavaScript代码将会更难维护，只能期待您能选中正确的线程来在不同时间停止/启动。Web应用程序内常见的另一种情况增加了问题的复杂性，即您可能只想要函数被调用10次，不多也不少。这就需要再添加一个全局变量。并且，您不能在您的线程创建中创建另一个内联函数，您必须引用一个独立函数。随着页面上线程处理复杂性的增加，整体的复杂性也开始迅速增加。Timers插件的目的是通过改变您处理线程的方式来简化Web应用程序上的 JavaScript线程处理，并且依我看来，让其更接近Java代码。与依赖于从 setlnterval()函数传递回的threadID 不同，Timers插件更改了设计来让您在创建之时选择线程名，这样 一来，就无需存储所有的线程ID以便用在代码内的其他地方。好的变更还有其他一些，但是正是这些细微的更改才让处理JavaScript线程变得更为简单。参阅清单13来了解清单12所示的代码如何被更改以便加入Timers插件的。您是否也与我一样认为这看上去更容易处理呢？清单13.具有timers 的JavaScript 线程/ attach an event to the start button,/ kicking off the thread$(#start).click(function()/ using