Jquery UI dialog 详解

Posted 2022-07-28 coder_up

一 属性
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();
                
            );
        

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