使用 jQuery（中级），第 1 部分: 使用插件创建和扩展 jQuery 函数

核心提示： 举个鼠标滚轮的例子，让我们用鼠标滚轮同样地控制 div 值的增加/减少，使用 jQuery（中级），第 1 部分: 使用插件创建和扩展 jQuery 函数(7)，当向上滚动鼠标滚轮时，div 增加，第 2 部分: 创建自己的插件 使用 jQuery，第 3 部分: 用 jQue

举个鼠标滚轮的例子，让我们用鼠标滚轮同样地控制 div 值的增加/减少。当向上滚动鼠标滚轮时，div 增加，当向下滚动时，div 的值减少。如果您的鼠标没有滚轮的话，那么就可以假设一下。

清单 4. 鼠标滚轮插件

//　set　up　the　div　that　will　capture　our　events　
<div　id=wheelSample></div>　
　
//　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),　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 应用程序捕捉所有形式的鼠标交互，正如一个典型的桌面应用程序所做的那样。此外，由于插件的应用将在今后的几年中越来越普遍，开发人员将会肩负起将现有的桌面应用程序转换成 Web 应用程序的责任。通过在 Web 上提供用户在桌面上已有的所有的鼠标交互，这些插件会使这种转换变得非常容易。

blockUI

blockUI 是提供创建模式对话框功能的几个插件中的一个。也许您会说 JavaScript 已经提供了很多很酷的模式对话框，比如 alert() 和 confirm()。我不否认，无论是开发人员还是用户都非常喜欢这些模式对话框。它们在一个设计良好的 Web 站点上看起来的确不赖。然而，开发人员还有一个更好的选择，可以让您从用户那里收集信息并使您的模式对话框在 Web 应用程序上看上去也十分自然。注意，喜欢使用警告/确认的读者可以直接跳到下一节了。

编缉推荐阅读以下文章

• 使用 jQuery（中级），第 2 部分: 创建自己的插件
• 使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序
• 使用 jQuery，第 2 部分: 构建未来的 Web 应用程序
• 使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器