首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:22:06
字体:
来源:转载
供稿:网友
主要参数
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 =
'<div 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>' +
'</div>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"确定": function() {
var dlg = $(this).dialog("close");
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选