Jquery ui的dialog使用文件概述
一個浮動的視窗，包含標題和內容兩部分。可以移動，調整大小，以及關閉圖示'×'。如果內容長度超過了對話方塊內容區域的顯示，則會自動出現滾動條。除此之外，還有一些常用的選項，如：新增底部按鈕欄、模式視窗遮蔽層等。

·引數（名稱 : 引數型別 : 預設值）
autoOpen : Boolean : true
如果設定為true，則預設頁面載入完畢後，

就自動彈出對話方塊；相反則處理hidden狀態。

初始：$('.selector').dialog({ autoOpen:

false });
獲取：var autoOpen =

$('.selector').dialog('option',

'autoOpen');
設定：$('.selector').dialog('option',

'autoOpen', false);

bgiframe : Boolean : false
如果設定為true，則呼叫bgiframe外掛，用

於修復在IE6瀏覽器中無法顯示於其它控制元件

（select,flash）之上的問題。
初始：$('.selector').dialog({ bgiframe:

true });
獲取：var bgiframe =

$('.selector').dialog('option',

'bgiframe');
設定：$('.selector').dialog('option',

'bgiframe', true);

buttons : Object : { }
為對話方塊新增相應的按鈕及處理函式。
初始：$('.selector').dialog({ buttons:

{ "Ok": function() { $(this).dialog

("close"); } } });
獲取：var buttons =

$('.selector').dialog('option',

'buttons');
設定：$('.selector').dialog('option',

'buttons', { "Ok": function() {

$(this).dialog("close"); } });

closeOnEscape : Boolean : true
設定當對話方塊開啟的時候，使用者按ESC鍵是否

關閉對話方塊。
初始：$('.selector').dialog({

closeOnEscape: false });
獲取：var closeOnEscape =

$('.selector').dialog('option',

'closeOnEscape');
設定：$('.selector').dialog('option',

'closeOnEscape', false);

dialogClass : String : ''
設定指定的類名稱，它將顯示於對話方塊的標

題處。
初始：$('.selector').dialog({

dialogClass: 'alert' });
獲取：var dialogClass =

$('.selector').dialog('option',

'dialogClass');
設定：$('.selector').dialog('option',

'dialogClass', 'alert');

draggable : Boolean : true
如果設定為true，則允許拖動對話方塊的標題

欄移動視窗。
初始：$('.selector').dialog({

draggable: false });
獲取：var draggable =

$('.selector').dialog('option',

'draggable');
設定：$('.selector').dialog('option',

'draggable', false);

height : Number : 'auto'
設定對話方塊的高度（單位：畫素）。
初始：$('.selector').dialog({ height:

530 });
獲取：var height =

$('.selector').dialog('option',

'height');
設定：$('.selector').dialog('option',

'height', 530);

hide : String : null
使對話方塊關閉（隱藏），可新增動畫效果。

初始：$('.selector').dialog({ hide:

'slide' });
獲取：var hide = $('.selector').dialog

('option', 'hide');
設定：$('.selector').dialog('option',

'hide', 'slide');

maxHeight : Number : false
設定對話方塊的最大高度（單位：畫素）。
初始：$('.selector').dialog({

maxHeight: 400 });
獲取：var maxHeight =

$('.selector').dialog('option',

'maxHeight');
設定：$('.selector').dialog('option',

'maxHeight', 400);

maxWidth : Number : false
設定對話方塊的最大寬度（單位：畫素）。
初始：$('.selector').dialog({ maxWidth:

600 });
獲取：var maxWidth =

$('.selector').dialog('option',

'maxWidth');
設定：$('.selector').dialog('option',

'maxWidth', 600);

minHeight : Number : 150
設定對話方塊的最小高度（單位：畫素）。
初始：$('.selector').dialog({

minHeight: 300 });
獲取：var minHeight =

$('.selector').dialog('option',

'minHeight');
設定：$('.selector').dialog('option',

'minHeight', 300);

minWidth : Number : 150
設定對話方塊的最小寬度（單位：畫素）。
初始：$('.selector').dialog({ minWidth:

400 });
獲取：var minWidth =

$('.selector').dialog('option',

'minWidth');
設定：$('.selector').dialog('option',

'minWidth', 400);

modal : Boolean : false
是否為模式視窗。如果設定為true，則在頁

面所有元素之前有個遮蔽層。
初始：$('.selector').dialog({ modal:

true });
獲取：var modal =

$('.selector').dialog('option', 'modal');

設定：$('.selector').dialog('option',

'modal', true);

position : String, Array : 'center'
設定對話方塊的初始顯示位置。可選值:

'center', 'left', 'right', 'top',

'bottom', 或是一個數組['right','top']
初始：$('.selector').dialog({ position:

'top' });
獲取：var position =

$('.selector').dialog('option',

'position');
設定：$('.selector').dialog('option',

'position', 'top');

resizable : Boolean : true
設定對話方塊是否可以調整大小。
初始：$('.selector').dialog({

resizable: false });
獲取：var resizable =

$('.selector').dialog('option',

'resizable');
設定：$('.selector').dialog('option',

'resizable', false);

show : String : null
用於顯示對話方塊。
初始：$('.selector').dialog({ show:

'slide' });
獲取：var show = $('.selector').dialog

('option', 'show');
設定：$('.selector').dialog('option',

'show', 'slide');

stack : Boolean : true
設定移動時對話方塊是否前置於其它的對話方塊

前面。
初始：$('.selector').dialog({ stack:

false });
獲取：var stack =

$('.selector').dialog('option', 'stack');

設定：$('.selector').dialog('option',

'stack', false);

title : String : ''
指定對話方塊的標題，也可以在對話方塊附加元

素的title屬性中設定標題。
初始：$('.selector').dialog({ title:

'Dialog Title' });
獲取：var title =

$('.selector').dialog('option', 'title');

設定：$('.selector').dialog('option',

'title', 'Dialog Title');

width : Number : 300
設定對話方塊的寬度（單位：畫素）。
$('.selector').dialog({ width: 460 });

獲取：var width =

$('.selector').dialog('option', 'width');

設定：$('.selector').dialog('option',

'width', 460);

zIndex : Integer : 1000
設定對話方塊的zindex值。
初始：$('.selector').dialog({ zIndex:

3999 });
獲取：var zIndex =

$('.selector').dialog('option',

'zIndex');
設定：$('.selector').dialog('option',

'zIndex', 3999);


·事件
beforeclose : dialogbeforeclose
當對話方塊關閉之前，觸發此事件。如果返回

false，則對話方塊仍然顯示。
初始：$('.selector').dialog({

beforeclose: function(event, ui) { ... }

});
繫結：$('.selector').bind

('dialogbeforeclose', function(event, ui)

{ ... });

open : dialogopen
當對話方塊開啟後，觸發此事件。
初始：$('.selector').dialog({ open:

function(event, ui) { ... } });
繫結：$('.selector').bind('dialogopen',

function(event, ui) { ... });

focus : dialogfocus
當對話方塊獲取焦點時，觸發此事件。
初始：$('.selector').dialog({ focus:

function(event, ui) { ... } });
繫結：$('.selector').bind

('dialogfocus', function(event, ui) { ...

});

dragStart : dragStart
當開始拖拽對話方塊移動時，觸發此事件。
初始：$('.selector').dialog({

dragStart: function(event, ui) { ... }

});
繫結：$('.selector').bind('dragStart',

function(event, ui) { ... });

drag : drag
當拖拽對話方塊移動時，觸發此事件。
初始：$('.selector').dialog({ drag:

function(event, ui) { ... } });
繫結：$('.selector').bind('drag',

function(event, ui) { ... });

dragStop : dragStop
當拖拽對話方塊動作結束時，觸發此事件。
初始：$('.selector').dialog({ dragStop:

function(event, ui) { ... } });
繫結：$('.selector').bind('dragStop',

function(event, ui) { ... });

resizeStart : resizeStart
當開始改變對話方塊大小時，觸發此事件。
初始：$('.selector').dialog({

resizeStart: function(event, ui) { ... }

});
繫結：$('.selector').bind

('resizeStart', function(event, ui) { ...

});

resize : resize
當對話方塊大小改變時，觸發此事件。
初始：$('.selector').dialog({ resize:

function(event, ui) { ... } });
繫結：$('.selector').bind('resize',

function(event, ui) { ... });

resizeStop : resizeStop
當對話方塊大小改變結束時，觸發此事件。
初始：$('.selector').dialog({

resizeStop: function(event, ui) { ... }

});
繫結：$('.selector').bind('resizeStop',

function(event, ui) { ... });

close : dialogclose
當對話方塊關閉後，觸發此事件。
初始：$('.selector').dialog({ close:

function(event, ui) { ... } });
繫結：$('.selector').bind

('dialogclose', function(event, ui) { ...

});


·屬性
destroy
銷燬對話方塊物件。
用法：.dialog( 'destroy' )

disable
禁用對話方塊。
用法：.dialog( 'disable' )

enable
啟用對話方塊。
用法：.dialog( 'enable' )

option
獲取或設定對話方塊的屬性。
用法：.dialog( 'option' , optionName ,

[value] )

close
關閉對話方塊。
用法：.dialog( 'close' )

isOpen
用於判斷對話方塊是否處理開啟狀態。
用法：.dialog( 'isOpen' )

moveToTop
將對話方塊移至最頂層顯示。
用法：.dialog( 'moveToTop' )

open
開啟對話方塊。
用法：.dialog( 'open' )