JQuery 消息框插件。

• 下载演示 - 249.81 KB

引言

有时，在使用 JavaScript 时，我们需要编写一个确认对话框或消息框来显示一些信息数据。我们可以使用 JavaScript 的 alert 函数或 confirm 函数来执行此类操作。但是，为了制作一个漂亮的 UI，我们可以使用 JQuery UI 对话框，它提供了一个漂亮的 Chrome 窗口。但是设置起来不是一个简单的任务。在本文中，我将介绍一个小插件，它可以帮助我们显示一些基本的对话框，以便完成工作而无需太多代码。

背景

JQuery UI 库越来越流行，用于实现 Web 2.0 风格的用户界面。该库提供了一组丰富的控件，Dialog 组件就是其中之一。但是要显示一个对话框，需要设置一些 div 和对话框的 content 。然后可以调用 dialog 函数显示，并带有许多可选选项用于自定义。

Using the Code

该插件非常简单和小型，下载代码块并在引用了 jquery lib 和 UI lib 之后引用脚本。注意，如果没有 UI lib，该插件将无法工作。

(function($)
{
	$.msgBox = $.fn.msgBox = function(msg, onDialogClosed, customOpt, buttons)
	{
		.....
	};

	$.fn.msgBox.defaults =
	{

		height: 200,
		width: 400,
		title: "Message",
		modal: true,
		resizable: true,
		closeOnEscape: true
	};	

	$.fn.msgBox.confirm = function(msg, onConfirm, yesNo)
	{
		.....
	}

	$.fn.extend({ 
         
        //pass the options variable to the function
        confirmLink: function(options) {
			.....           
        }
    });

})(jQuery);

要使用该插件，首先在 head 部分进行引用

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" 
rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.msgBox.v1.js"></script>

要显示消息框，只需按如下方式调用

$.msgBox("Hello World");

您可以选择性地指定对话框关闭或自定义标题时的回调处理程序等。

$.msgBox("Hello World Demo with Custom Title", null, { title: "My Title" });

要显示确认对话框，请使用以下方法

$.msgBox.confirm("Are you sure?",function(){
		alert("OK Clicked");
});

现在，要做一些更有用的事情，您可以使用 confirmLink 方法将任何链接连接起来，以自动显示确认对话框。锚链接的 rel 属性将默认用于显示对话框文本。

$("#confirmDemo2").confirmLink();
....
<a href="http://www.google.com" id="confirmDemo2" 
rel="Are you sure you want to visit google?">
	Click to display a confirm dialog (inline)</a>

对于提交按钮，可以使用以下方法

$(".confirmButton").confirmLink();
....
<input type="submit" value="Submit" class="confirmButton" 
	rel="Are you sure you want to visit google?" />

幕后

对于那些想要了解插件工作原理的人，这里有一些细节。要显示 jquery UI 对话框，需要在页面中声明一个 div 部分以及对话框内容。现在，如果每次在每个页面上都需要这样做，就会变得繁琐。因此，该插件所做的是在 BODY 的末尾注入一个隐藏的 div ，用于与对话框一起使用。它第一次调用函数时创建 div 。下次，它将重用该 div。

if (div.length == 0) {
    div = jQuery("<div id=\"msgBoxHiddenDiv\" title=\"Message\" 
	style=\"font-size: 10pt;display:none\"><p id=\"msgBoxHiddenDivMsg\" 
	style=\"font-size: 10pt; color: black; text-align: center\"></p></div>");
    div.appendTo(document.body);
    var dialogOpt = {
        bgiframe: true,
        autoOpen: false,
        height: opts.height,
        width: opts.width,
        modal: opts.modal,
        resizable: opts.resizable,
        closeOnEscape: opts.closeOnEscape,
        draggable: opts.draggable,
        buttons: $.fn.msgBox.defaultButtons
    };
    div.dialog(dialogOpt);
}

关注点

确保您已引用 JQuery UI 库。大多数 msgBox 函数接受可选参数，如果您需要自定义。

您可能可以以多种方式扩展该插件，例如 UI lib 检测等，并且还有许多替代方案。我只是尝试使其简单易用且有用。

历史

• V1 - 基本消息框和确认对话框功能
• V1.1 - 包含对 INPUT 节点的支持，以及 Firefox 的错误修复。下载中包含了一个 ASP.NET Web 应用程序演示