jQuery UI dialog 參数说明

前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大，伸到了A层的外面，那伸到A层之外的部分就看不到了，由于B层是在A层上弹出的 B的大小受到A层大小的限制

于是找到了这个资料 保存下来

-----------------------------------------------------------------------------------------------------

初始化參数

对于 dialog 来说，首先须要进行初始化，在调用 dialog 函数的时候，假设没有传递參数，或者传递了一个对象，那么就表示在初始化一个对话框。

没有參数，表示依照默认的设置初始化对话框，在当前最新版本号的 jQuery UI 1.8.9 中， dialog 支持下列属性。

autoOpen 初始化之后，是否马上显示对话框，默觉得 true

modal 是否模式对话框，默觉得 false

closeOnEscape 当用户按 Esc 键之后，是否应该关闭对话框，默觉得 true

draggable 是否同意拖动，默觉得 true

resizable 能否够调整对话框的大小，默觉得 true

title 对话框的标题，能够是 html 串，比如一个超级链接。

position 用来设置对话框的位置，有三种设置方法

1. 一个字符串，同意的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center'，表示对话框居中。
2. 一个数组，包括两个以像素为单位的位置，比如，

var dialogOpts = {
position: [100, 100]
};

3. 一个字符串组成的数组，比如， ['right','top']，表示对话框将会位于窗体的右上角。

var dialogOpts = {
position: ["left", "bottom"]
};

一组关于尺寸的属性，以像素为单位。

width 宽度, 默认 300

height 高度，默认 'auto'

minWidth 最小宽度，默认 150

minHeight 最小高度，默认 150

maxWidth 最大宽度

maxHeight 最大高度

还有关于关闭的效果

hide 当对话框关闭时的效果，默觉得 null, 比如， hide: 'slide'

show 当对话框打开时的效果。默觉得 null

堆叠

stack 对话框是否叠在其它对话框之上。默觉得 true

zIndex 对话框的 z-index 值，一个整数，越大越在上面。默认 1000

button

buttons 一个对象，属性名将会被作为button的提示文字，属性值为一个函数，即button的处理函数。

var dialogOpts = {
buttons: {
"Ok": function() { } ,
"Cancel": function() {}
}
}
$("#myDialog").dialog(dialogOpts);

IE6 的 select 元素穿透问题

bgiframe 解决 IE6 的 select 元素穿透问题，通过添加一个 iframe 来解决。默觉得 true

这一功能须要使用脚本 jquery.bgiframe-2.1.2，脚本在 jQuery UI 压缩包中 development-bundle/external 目录中，须要将这个文件增加到页面中。

<script src="../jquery-1.4.4.js"></script>
<script src="../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../ui/jquery.ui.core.js"></script>

这个控件如今有一个bug,在弹出窗体有遮罩层的情况下，在chrome下，假设出现纵向滚动栏，无法用鼠标拖动，仅仅能使用滚轮。

上边的说明来自 王洋

设置前



设置后



演示样例

$("#dialog").dialog({
bgiframe: true,
resizable: false,
height:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Delete all items in recycle bin': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
效果例如以下。

对话框的方法

初始化之后，就能够使用对话框了，比方说打开对话框，关闭对话框，这须要通过对话框的方法来完毕。

对话框的方法须要通过调用 dialog 函数，并传递字符串形式的方法来完毕。比如，dialog( "open" ) 表示调用对话框的 open 方法。

open 打开对话框，须要注意的是，并没有 open() 方法，而是通过 dialog( "open" ) 来调用。比如， .dialog( "open" )

close 关闭对话框

$(this).dialog('close');

destroy 摧毁一个对话框，去除对话框功能，将元素还原为初始化之前的状态。

isOpen 检查对话框的状态，假设已经打开，返回 true.

moveToTop 将对话框移到对话框的顶端

option 设置或者读取对话框某个属性的值，有两种使用方法。

假设第二个參数为字符串，假设提供了三个參数，表示设置，假设两个參数，表示读取。 比如 .dialog( "option" , optionName , [value] )

假设第二个參数为对象，表示一次性设置多个属性。

enable 启用对话框

disable 禁用对话框

对话框的事件

在对话框使用过程中，还将触发多种事件，我们能够自己定义事件处理函数进行响应。

create

open

focus

dragStart

drag

dragStop

resizeStart

resize

resizeStop

beforeClose

close

比如，以下的设置了 open，close，beforeClose 的事件处理，显示窗体的状态。

var dialogOpts = {
open: function() {
$("#status").find(".ui-widget-content").text("The dialog is open");
},
close: function() {
$("#status").find(".ui-widget-content").text("The dialog is closed");
},
beforeclose: function() {
if (parseInt($(".ui-dialog").css("width")) == 300 ||
parseInt($(".ui-dialog").css("height")) == 300) {
return false
}
}
};
$("#myDialog").dialog(dialogOpts);

效果例如以下

对话框使用常见问题

常见的问题就是多次初始化一个对话框。

对话框只须要初始化一次，多次初始化会有问题。