jQuery技术

使用jQuery(中级),第1部分:使用插件创建和扩展jQuery函数(2)

字号+ 作者:H5之家 来源:H5之家 2015-10-22 09:40 我要评论( )

简介 自我发表了有关 jQuery JavaScript 库的第一个系列文章的这六个月来,在 jQuery 领域发生了很多事情。对我们这些 jQuery 的信徒而言,最令人激动的莫过于

插件

jQuery 插件结构有很多优点。首先,它让您能够只使用 jQuery 核心以外的那些想要使用的小部件及函数。这在 Web 应用程序中非常重要,因为每附加一个插件都意味着下载和流量的增加。通过允许您只使用那些希望使用的插件,您就可以更好地管理 Web 流量。其次,它使那些热情高涨的第三方开发人员可以创建自已感兴趣的小部件并通过创建他们自已的插件来改进 jQuery 函数,而不必尝试通过 jQuery 核心代码来实现其想法。这使得 jQuery 的使用者能用集体的创造力和创造热情来扩展这个库,这样一来,新想法和新小部件的增长潜力几乎是无限的。这一点与封闭式的结构完全相反,后者需要 jQuery 团队审查和批准每个插件,这无疑会导致创建瓶颈。第三,这个由 jQuery 团队创建的插件架构,无论是对创建插件还是对使用插件的开发人员而言,用起来都很方便,这也是插件能够飞速发展的重要动力。然而,除了这些优点之外,也有一个不好的方面:这些插件没有正式的测试结构。因此,虽然可以放心 jQuery 核心已经被仔细测试过,但是如若选择使用了一个插件,也只能依靠第三方对其进行测试了。对于一个十分关键的 Web 应用程序而言,这个缺点应被予以重视。

要使用一个插件,需要将其放在您的页面上,与对任何 JavaScript 文件所做的(包括 jQuery 文件本身)无异。因此,如果需要在页面上使用一个插件,可以将其添加在 jQuery 之后,如清单 1 所示。

清单 1. 如何包含一个插件

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.alphanumeric.plus.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>

本文不会对如何编写插件以及插件如何工作的细节做过多介绍。这些内容会在将来的一篇文章中介绍,在那篇文章中,您还会编写自已的新插件并将其放到实际的 jQuery 插件存储库中。本文将着重探讨几个我比较喜欢的插件。这样做的目的不仅是为了向您展示我几乎每天都要使用的这些插件,还为了能够让您对 jQuery 插件存储库中可用的东西有一个大致的概念。我希望,借此能激发起您对插件的兴趣并自已去尝试使用它们。

好,下面就开始介绍我所偏爱的插件。

RightClick、ExtendedClick 与 Wheel

Web 应用程序的最主要目标之一就是让用户感觉他们像是在一个桌面应用程序上工作。换句话说就是让 Web 应用程序在视觉和感觉上都做到尽可能地与桌面应用程序一样。因此,如果一个用户想要一个工具栏显示在其桌面应用程序上的某个位置,那么 Web 应用程序也应尽量把这个工具栏放在同样的位置。这样就可以方便用户从桌面应用程序转移到 Web 应用程序,Web 应用程序的成功机率也会更大。

然而,Web 应用程序中有一个与桌面应用程序不一样的地方,那就是对鼠标事件的响应。也许您会对此心怀疑问,因为您的 Web 应用程序在您单击鼠标时工作得很好。当然,在大多数情况下,很多 Web 应用程序在处理鼠标左键单击事件时都会运行良好。实际上,多数人都习惯了只用鼠标的左键浏览 Web 站点,这时的 Web 应用程序更像是一个 Apple 应用程序,只用一个键。但所有 Windows® 应用程序都会使用两个鼠标键(有时甚至是 3 个键)。鼠标的左键用于激活命令,右键用于给出选项。我们已经习惯了这种用法,那么为什么还有这么多的 Web 应用程序忽略了鼠标右键呢。进一步说,Web 应用程序也忽略了 CTRL+单击、Shift+单击与鼠标滚轮的操作。那么在忽略了这么多鼠标操作的情况下,一个 Web 应用程序如何能真正地仿效桌面应用程序呢?一个真正的 Web 应用程序应该充分利用鼠标的功用。

要想弄清忽略鼠标右键单击的 Web 应用程序和没有忽略这些操作的 Web 应用程序之间的差别,以及额外的鼠标键如何能增强 Web 站点的功能,我们不妨比较一下 GMail 与 Yahoo Mail。这里先对 GMail 的粉丝们说声对不起,但在我看来,Yahoo Mail 在这方面的确比 GMail 做得好。在 GMail 中,对鼠标右键单击的处理与普通 Web 页面没什么区别。因此,当右键单击 GMail 中的一个消息时,它展示给您的只是诸如 “Back”、“Inspect Element” 或 “Select All” 之类的选项。这些动作与处理消息有什么关系呢?当然,这并不是说鼠标右键在 GMail 页面中没有任何作用。但我们与 Yahoo Mail 做一下比较,看看它是如何处理鼠标右键单击的。我们右键单击 Yahoo Mail 页面中的一个消息时,呈现给我的是包括 “打开”、“打印”、“回复” 和 “删除” 在内的选项。这些动作都是邮件应用程序中常用的。这些选项就让一个典型的 Web 应用程序非常类似于您在桌面上经常用到的邮件应用程序(试着右键单击 Outlook 中的一个消息,看看哪个 Web 应用程序所提供的选项更接近这些选项)。图 3 和图 4 显示了右键单击选项的区别。

图 3. Yahoo Mail 中的右键单击

图 4. GMail 中的右键单击

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
s