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

核心提示： 清单 5. blockUI 插件//thiswillcreateadialogwithourdefaulttext,//effectivelyreplicatingthe//alert()function$.blockUI({message:"Thisisasampledialog&q

清单 5. blockUI 插件

//　this　will　create　a　dialog　with　our　default　text,　
//　effectively　replicating　the　
//　alert()　function　
$.blockUI({message:　"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:　"<h2>Sample　Dialog</h2><p　style='color:green;'>　
　　　　　　　This　is　our　message</p>"});　
　
//　perhaps　most　importantly,　we　can　add　a　div　to　the　message,　allowing　
//　us　to　create　our　own　dialog,　with　the　look,　feel,　message,　and　input　we　want　
<div　id=loginMessage　style="display:none;cursor:default;">　
　　　<p><h2>Login</h2>　
　　　<p>Username:　<input　type=text　id=user>　
　　　<p>Password:　<input　type=text　id=pass>　
　　　<p><input　type=button　value="OK"　id=ok>　
　　　<input　type=button　value="Cancel"　id=cancel>　
</div>　
　
//　and　the　jQuery　code　to　show　this　is　pretty　much　the　same　
$.blockUI({　message:$("#loginMessage")});

有关 blockUI 只剩下两个很小的问题要讨论，之后，您就可以把它放在您自己站点上了。第一，我还没有关闭此对话框。这也是个小问题，对么？第二，我用 清单 5 中的代码片段创建的所有对话框都具有默认的 blockUI 外观，而这不是我们想要的，因为此插件的一个很重要的卖点就是能为对话框创建个性的观感。不过，blockUI 本身就带一段 CSS 代码，您可以拿来放入到自己的 CSS 文件并随意定制，这样一来，您就重新获得了让对话框以您想要的方式显示的能力。不过，为了覆盖 blockUI 的 CSS 属性，必须要告知此插件去 CSS 文件内查找而不是使用其默认设置。清单 6 所示的是示例代码内的一个代码片段，这些代码显示了如何关闭对话框、如何使用您自己的 CSS 以及此 CSS 内可用的选项。

编缉推荐阅读以下文章

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