php和jquery ui弹出框,jQuery UI Dialog 创建友好的弹出对话框实现代码

主要参数

jQuery UI Dialog常用的参数有：

1、autoOpen：默认true，即dialog方法创建就显示对话框

2、buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:

{"确定":function(){},"取消":function(){}}

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

3、modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住

4、title：标题

5、draggable：是否可手动，默认true

6、resizable：是否可调整大小，默认true

7、width：宽度，默认300

8、height：高度，默认"auto"

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

1、closeOnEscape：默认true，按esc键关闭对话框

2、show：打开对话框的动画效果

3、hide：关闭对话框的动画效果

4、position：对话框显示的位置，默认"center"，可以设置成字符串或数组：

'center', 'left', 'right', 'top', 'bottom'

['right','top']，通过上面的几个字符串组合(x,y)

[350,100]，绝对的数值(x,y)

5、minWidth：默认150，最小宽度

6、minHeight：默认150，最小高度

使用方法：

$("...").dialog({

title: "标题",

//...更多参数

});

主要方法

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

open：打开对话框

close：关闭对话框(通过close不会销毁，还能继续使用)

destroy：销毁对话框

option：设置参数，即前面列出的参数

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

var dlg = $("...").dialog({

//...各种参数

});

dlg.dialog("option", { title: "标题" }); // 设置参数

dlg.dialog("open"); // 使用open方法打开对话框

主要事件

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

open：打开时

close：关闭时

create：创建时

resize：调整大小时

drag：拖动时

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

$("...").dialog({

//...各种参数

open: function(event, ui) {

$(".ui-dialog-titlebar-close", $(this).parent()).hide();

}

});

具体使用

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

jQuery.extend(jQuery, {

// jQuery UI alert弹出提示

jqalert: function(text, title, fn) {

var html =

'

' +

'

' +

' ' + text +

'

' +

'

';

return $(html).dialog({

//autoOpen: false,

resizable: false,

modal: true,

show: {

effect: 'fade',

duration: 300

},

title: title || "提示信息",

buttons: {

"确定": function() {

var dlg = $(this).dialog("close");

fn && fn.call(dlg);

}

}

});

},

// jQuery UI alert弹出提示,一定间隔之后自动关闭

jqtimeralert: function(text, title, fn, timerMax) {

var dd = $(

'

' +

'

' +

' ' + text +

'

' +

'

');

dd[0].timerMax = timerMax || 3;

return dd.dialog({

//autoOpen: false,

resizable: false,

modal: true,

show: {

effect: 'fade',

duration: 300

},

open: function(e, ui) {

var me = this,

dlg = $(this),

btn = dlg.parent().find(".ui-button-text").text("确定(" + me.timerMax + ")");

--me.timerMax;

me.timer = window.setInterval(function() {

btn.text("确定(" + me.timerMax + ")");

if (me.timerMax-- <= 0) {

dlg.dialog("close");

fn && fn.call(dlg);

window.clearInterval(me.timer); // 时间到了清除计时器

}

}, 1000);

},

title: title || "提示信息",

buttons: {

"确定": function() {

var dlg = $(this).dialog("close");

fn && fn.call(dlg);

window.clearInterval(this.timer); // 清除计时器

}

},

close: function() {

window.clearInterval(this.timer); // 清除计时器

}

});

},

// jQuery UI confirm弹出确认提示

jqconfirm: function(text, title, fn1, fn2) {

var html =

'

' +

'

' +

' ' + text +

'

' +

'

';

return $(html).dialog({

//autoOpen: false,

resizable: false,

modal: true,

show: {

effect: 'fade',

duration: 300

},

title: title || "提示信息",

buttons: {

"确定": function() {

var dlg = $(this).dialog("close");

fn1 && fn1.call(dlg, true);

},

"取消": function() {

var dlg = $(this).dialog("close");

fn2 && fn2(dlg, false);

}

}

});

},

// jQuery UI 弹出iframe窗口

jqopen: function(url, options) {

var html =

'

' +

' ' +

'

';

return $(html).dialog($.extend({

modal: true,

closeOnEscape: false,

draggable: false,

resizable: false,

close: function(event, ui) {

$(this).dialog("destroy"); // 关闭时销毁

}

}, options));

},

// jQuery UI confirm提示

confirm: function(evt, text, title) {

evt = $.event.fix(evt);

var me = evt.target;

if (me.confirmResult) {

me.confirmResult = false;

return true;

}

jQuery.jqconfirm(text, title, function(e) {

me.confirmResult = true;

if (e) {

if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {

$.globalEval(me.href);

me.confirmResult = false;

return;

}

var t = me.type && me.type.toLowerCase();

if (t && me.name && (t == "image" || t == "submit" || t == "button")) {

__doPostBack(me.name, "");

me.confirmResult = false;

return;

}

if (me.click) me.click(evt);

}

return false;

});

return false;

}

});

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

解决办法有(具体不演示)：

在close事件里面destroy

把alert/confirm提供里的dialog实例设置成静态的

在外部调用使用单个dialog实例

演示程序

html代码如下：

相应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);

};

}

然后可以这样使用：

结尾

更多的资料请看jQuery UI Dialog官方演示：http://jqueryui.com/demos/dialog。

脚本之家下载地址 https://www.jb51.net/jiaoben/15574.html

本文演示下载 lwme-jquery-ui-dialog-demo.7z

作者：囧月

出处：http://lwme.cnblogs.com/