初始化参数

对于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.png

设置后

dialog2.png

示例

$(
"
#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
'
);
}
}
});

效果如下。

dialog3.png

对话框的方法

初始化之后，就可以使用对话框了，比如说打开对话框，关闭对话框，这需要通过对话框的方法来完成。

对话框的方法需要通过调用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);

效果如下

dialog4.png

对话框使用常见问题

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

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

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

学习资源

人民邮电出版社的是目前唯一的一本中文资料。只不过版本有点老，是1.6版。