Jquery UI dialog 讲解
一 属性
1 autoOpen ，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。
初始化例：请注意，$('.selector')是dialog 的类名，在本例中.selector=#dialoag,。
$('.selector').dialog({ autoOpen: false });
初始化后，得到和设置此属性例：
//获得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//设置
$('.selector').dialog('option', 'autoOpen', false);
2 bgiframe 默认为false
为true时，在IE6下，让后面那个灰屏盖住select。
初始化例：
$('.selector').dialog({ bgiframe: true });
初始化后，得到和设置：
//获取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//设置
$('.selector').dialog('option', 'bgiframe', true);
3 buttons 显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。
最上面的例子中已经有buttons属性的用法，请注意。
初始化例：
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
初始化后，得到和设置：
//获取
var buttons = $('.selector').dialog('option', 'buttons');
//设置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });
4 closeOnEscape 为true的时候，点击键盘ESC键关闭dialog，默认为true；
初始化例：
$('.selector').dialog({ closeOnEscape: false });
初始化后，得到和设置：
//获取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//设置
$('.selector').dialog('option', 'closeOnEscape', false);
5 dialogClass 类型将被添加到dialog，默认为空
初始化例：
$('.selector').dialog({ dialogClass: 'alert' });
初始化后，得到和设置：
//获取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
jquery学习在线教程//设置
$('.selector').dialog('option', 'dialogClass', 'alert');
6 draggable、resizable : draggable是否可以使用标题头进行拖动，默认为true，可以拖动;resizable是否可以改变dialog的大小，默认为true，可以改变大小。
初始化例：
$('.selector').dialog({ draggable: false,resizable:false });
初始化后，得到和设置：
//获取
var draggable = $('.selector').dialog('option', 'draggable');
//设置
$('.selector').dialog('option', 'draggable', false);
7 width、height ，dialog的宽和高，默认为auto，自动。
初始化例：
$('.selector').dialog({ height: 530,width:200 });
初始化后，得到和设置：同上
8 maxWidth、maxHeight、minWidth、minHeight ，dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false，为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。
初始化例：
$('.selector').dialog({ maxHei
ght: 400,maxWidth:600,minHeight:300,minWidth:300 });
初始化后，得到和设置：同上
9 hide、show ，当dialog关闭和打开时候的效果。默认为null，无效果
初始化例：最上面的实例中用到，请自己看吧。
初始化后，得到和设置：同上
10 modal，是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默
认为false不是模式窗口。
初始化例：$('.selector').dialog({ modal: true });
初始化后，得到和设置：同上
11 title，dialog的标题文字，默认为空。
初始化例：见最上面的实例。1.113 初始化后，得到和设置：同上
12 position ，dialog的显示位置：可以是'center', 'left', 'right', 'top', 'bottom'，也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
初始化例：$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后，得到和设置：同上
13 zIndex, dialog的zindex值，默认值为1000.
初始化例：$('.selector').dialog({ zIndex: 3999 });
初始化后，得到和设置：同上
14 stack 默认值为true，当dialog获得焦点是，dialog将在最上面。
初始化例：$('.selector').dialog({ stack: false });
初始化后，得到和设置：同上
二 事件
1 beforeclose 类型dialogbeforeclose ， 当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止。
初始化例：$('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
使用类型绑定此事件例：$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});
2 close 类型：dialogclose ，当dialog被关闭后触发此事件。
初始化例：$('.selector').dialog({
close: function(event, ui) { ... }
});
使用类型绑定此事件例：$('.selector').bind('dialogclose', function(event, ui) {
...
});
3 open 类型：dialogopen ，当dialog打开时触发。（篇幅有限，该省略的就省略了啊，初始化例和使用类型绑定事件可以向上参考。）
4 focus 类型：dialogfocus ，当dialog获得焦点时触发。
5 dragStart 类型：dragStart，当dialog拖动开始时触发。
6 drag 类型：drag ，当dialog被拖动时触发。
7 dragStop 类型：dragStop ，当dialog拖动完成时触发。
8 resizeStart 类型：resizeStart ，当dialog开始改变窗体大小时触发。
9 resize 类型：resize，当dialog被改变大小时触发。
10 resizeStop 类型：resizeStop，当改变完大小时触发。
三 方法
1 destroy ， 销毁对话框对象。 例：.dialog( 'destroy' )
2 disable，禁用对话框。例：.dialog('disable');
3 enable，启用对话框。例，如3.2
4 close，open，关闭、打开dialog
5 option ，设置和获取dialog属性，例如：.dialog( 'option' , optionName , [value] ) ，如果没有value，将是获取。
6 isOpen ，如果dialog
打开则返回true，例如：.dialog('isOpen')
7 moveToTop ，将dialog移到最上层，例如：.dialog( 'moveToTop' )

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。