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

核心提示： 言归正传，警告/确认功能在模式对话框方面有很多缺陷，使用 jQuery（中级），第 1 部分: 使用插件创建和扩展 jQuery 函数(8)，第一个也是最重要的一点就是，除了在确认功能上的 OK 或 Cancel 外，第 2 部分: 创建自己的插件 使用 jQuery，第 3

言归正传，警告/确认功能在模式对话框方面有很多缺陷。第一个也是最重要的一点就是，除了在确认功能上的 OK 或 Cancel 外，它们只能显示信息却不能收集信息。更理想的情况是弹出一个对话窗，能提供更多的灵活性，且允许向此对话框添加任何想要的元素。换句话说，这个对话窗与您在其他编程语言中使用的类似。在这方面，BlockUI 是我最钟爱的一个插件，因它易于处理，而且非常灵活，便于在同一个 Web 应用程序上处理很多对话框。不仅如此，它还提供了很多不同类型的对话框供使用。

在本文随附的示例代码（参见 下载）中，我使用 blockUI 创建了一个模式对话框，如下所示，我稍候会对所涉及的代码和选项进行深入的介绍。

图 5. blockUI 示例

正如在图 5 中所看到的，页面上有一个模式对话框。而对页面其他部分的输入则由对话框下方的半透明层所封闭，这有效阻止了用户除对话框本身之外与 Web 应用程序间的交互。实现这种封闭功能的代码使用了一个 IFrame，但实际上问题不大，因为此插件作者已经在所有不同的浏览器上测试过并已经确保此插件工作正常。

创建对话框的第一步是指定其消息。一个消息可以是您想要显示给用户的任何文本（复制 alert() 函数），可以是向用户显示 HTML，也可以是创建一个标记了的消息（使用粗体、颜色等）。不过，我认为此插件最有价值的一点是允许提供 div 作为消息，这就让您能够以自己想要的任何布局、任何数量的输入、按钮和所需信息来创建您自己的对话框。

编缉推荐阅读以下文章

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