欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery UI Dialog 创建友好的弹出对话框实现代码

程序员文章站 2022-03-29 10:41:28
主要参数 jQuery UI Dialog常用的参数有: 1、autoOpen:默认true,即dialog方法创建就显示对话框 2、buttons:默认无,用于设置显示...

主要参数
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 =
'<p class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</p>';
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 = $(
'<p class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</p>');
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 =
'<p class="dialog" id="dialog-confirm">' +
' <p>' +
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
' </p>' +
'</p>';
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 =
'<p class="dialog" id="dialog-window" title="提示信息">' +
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' +
'</p>';
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代码如下:

. 代码如下:


<p>
<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="打开窗口" />
</p>


相应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("https://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 .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('确定要这么做吗?')" />