初始化参数

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

没有参数，表示按照默认的设置初始化对话框，在当前最新版本的jQueryUI1.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

按钮

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

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

IE6的select元素穿透问题

bgiframe解决IE6的select元素穿透问题，通过增加一个iframe来解决。默认为true

这一功能需要使用脚本jquery.bgiframe-2.1.2，脚本在jQueryUI压缩包中development-bundle\external文件夹中，需要将这个文件加入到页面中。

< scriptsrc = " ../jquery-1.4.4.js " >< / script>
< scriptsrc = " ../external/jquery.bgiframe-2.1.2.js " >< / script>
< scriptsrc = " ../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:{
 ' Deleteallitemsinrecyclebin ' : 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( " Thedialogisopen " );
},
close: function (){
$( " #status " ).find( " .ui-widget-content " ).text( " Thedialogisclosed " );
},
beforeclose: function (){
 if (parseInt($( " .ui-dialog " ).css( " width " )) == 300 ||
parseInt($( " .ui-dialog " ).css( " height " )) == 300 ){
 return false
}
}
};
$( " #myDialog " ).dialog(dialogOpts);

效果如下

对话框使用常见问题

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

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

Nemikor在Blog中说明了这个问题，BasicusageofthejQueryUIdialog，并且给出了一个示例，示例的地址

学习资源

人民邮电出版社的jQuery用户界面库学习指南是目前唯一的一本中文资料。只不过版本有点老，是1.6版。