jQuery UI Dialog 创建友好的弹出对话框

主要参数

jQuery UI Dialog常用的参数有：

autoOpen：默认true，即dialog方法创建就显示对话框
buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:

{"确定":function(){},"取消":function(){}}
[{text:"确定", click: function(){}},{text:"取消",click:function(){}}]

modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住
title：标题
draggable：是否可手动，默认true
resizable：是否可调整大小，默认true
width：宽度，默认300
height：高度，默认"auto"

其他一些不太常用的参数：

closeOnEscape：默认true，按esc键关闭对话框
show：打开对话框的动画效果
hide：关闭对话框的动画效果
position：对话框显示的位置，默认"center"，可以设置成字符串或数组：

'center', 'left', 'right', 'top', 'bottom'
['right','top']，通过上面的几个字符串组合(x,y)
[350,100]，绝对的数值(x,y)

minWidth：默认150，最小宽度
minHeight：默认150，最小高度

使用方法：

主要方法

jQuery UI Dialog提供了一些方法来控制对话框，仅列出常用的：

open：打开对话框
close：关闭对话框（通过close不会销毁，还能继续使用）
destroy：销毁对话框
option：设置参数，即前面列出的参数

使用的时候作为dialog方法的参数：

主要事件

jQuery UI Dialog提供了一些事件，比如打开、关闭对话框的时候做一些额外的事情：

open：打开时
close：关闭时
create：创建时
resize：调整大小时
drag：拖动时

使用方法同参数的使用方法，比如在打开时隐藏关闭按钮：

具体使用

以下封装了一些常用的提示信息，不再详细解释：

以上代码还存在一个问题，就是每次弹出框关闭之后都没有销毁。

解决办法有（具体不演示）：

在close事件里面destroy
把alert/confirm提供里的dialog实例设置成静态的
在外部调用使用单个dialog实例

演示程序

html代码如下：

<div>
<input type="button" id="button1" value="普通提示" />
<input type="button" id="button2" value="自动关闭提示" />
<input type="button" id="button3" value="确认提示" />
<input type="button" id="button4" value="确认提示2" />
<input type="button" id="button5" value="打开窗口" />
</div>

相应js代码如下：

$(function() {
$("#button1").click(function() {
$.jqalert("这是普通提示！");
});
$("#button2").click(function() {
$.jqtimeralert("这是自动关闭的提示！", "自动关闭提示",
function() {
$.jqalert("时间到");
});
});
$("#button3").click(function() {
$.jqconfirm("确定要这么做吗？", "确认提示",
function() {
$.jqalert("点了确定");
},
function() {
$.jqalert("点了取消");
});
});
$("#button4").click(function(e) {
if ($.confirm(e, "确定要这么做吗？"))
$.jqalert("点了确定");
});
$("#button5").click(function(e) {
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 });
});
});

对于服务器端控件使用confirm，可能需要如下方法：

$("#button4").click(function(e) {
if (!$.confirm(e, "确定要这么做吗？")) {
e.stopPropagation();
return false;
}
});

额外再提一下，jQuery UI使用的字体都是以em为单位，可能会导致平常使用时dialog变得比较大，可以额外设置以下样式：

body { font-size: 12px; } // 默认字体大小
/*jQuery UI fakes*/
.ui-widget { font-size: 1em; }
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }

这样子，dialog的大小看起来就比较正常了。

在Telerik RadControls for asp.net ajax中使用

主要是针对telerik RadButton控件，定义如下两个函数：

// 用于RadButton的confirm确认回调，即触发按钮点击
function radcallback(s) {
return Function.createDelegate(s, function(argument) {
if (argument) {
this.click();
}
});
}
// 用于为RadButton添加confirm提示
function radconfirm2(textOrFn, title, callback) {
return function(s, e) {
$.jqconfirm(textOrFn, title, callback || radcallback(s));
//radconfirm(textOrFn, callback, 280, 50, null, title);
e.set_cancel(true);
};
}

然后可以这样使用：

<telerik:RadButton ... OnClientClicking="radconfirm2('确定要这么做吗?')" />