JQuery中的dialog使用介绍

JQuery中的dialog使⽤介绍
初始化参数
对于 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
按钮
buttons ⼀个对象，属性名将会被作为按钮的提⽰⽂字，属性值为⼀个函数，即按钮的处理函数。

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);
效果如下
对话框使⽤常见问题
常见的问题就是多次初始化⼀个对话框。

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

Nemikor 在 Blog 中说明了这个问题，，并且给出了⼀个⽰例，
学习资源
⼈民邮电出版社的是⽬前唯⼀的⼀本中⽂资料。

只不过版本有点⽼，是 1.6 版。