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()