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');
//设置
$('.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({ maxHeight: 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' )

如：提示框

function alertDialog(msg, okClickHanler, width, height) {
    var w = width || 300;
    var h = height || 200;
    var alertdiv = $("<div title='提示'></div>").appendTo($("BODY"));
    var content = alertdiv.text(msg);
    alertdiv.dialog({
        autoOpen: true,
        height: h,
        width: w,
        modal: true,
        resizable: false,
        bgiframe: true,
        close: function (evt, ui) {
            alertdiv.dialog("destroy");
            alertdiv.html("").remove();
        },
        buttons:
        {
            "确定": function () {
                if (okClickHanler && $.isFunction(okClickHanler)) {
                    okClickHanler()
                }
                alertdiv.dialog("close");
            }
        }
    });
}

 //确认对话框
function confirmDialog(msg, title, okClickHanler, cancelClickHandler, width, height) {
    var w = width || 300;
    var h = height || 200;
    var confirmdiv = $("<div title='" + (title ? title : "确认") + "'></div>").appendTo($("BODY"));
    var content = confirmdiv.text(msg);
    confirmdiv.dialog({
        autoOpen: true,
        height: h,
        width: w,
        modal: true,
        resizable: false,
        bgiframe: true,
        close: function (evt, ui) {
            confirmdiv.dialog("destroy");
            confirmdiv.html("").remove();
        },
        buttons:
        {
            "确定": function () {
                if (okClickHanler && $.isFunction(okClickHanler)) {
                    okClickHanler()
                }
                confirmdiv.dialog("close");
            },
            "取消": function () {
                if (cancelClickHandler && $.isFunction(cancelClickHandler)) {
                    cancelClickHandler()
                }
                confirmdiv.dialog("close");
            }
        }
    });
}

用Dialog加载页面

function OpenDialog(url)
        {
            var div=$("<div id='div_Info' title='信息统计'></div>").appendTo($("BODY"));
            var content=div.load(url,{});
            $("#div_Info").data("url",url);
            div.dialog({
                autoOpen:true,
                width:800,
                height:550,
                modal:true,
                resizable:false,
                bgiframe:true,
                close:function(evt,ui)
                {
                     div.dialog("destroy");
                     div.html("").remove();
                }
            });
        }

此以上改善改善都可以重复利用。