還是先看例子吧。另外如果要拖動(dòng)、改變dialog的大小的話(huà)要加上ui.draggble.js和ui.resizable.js

1 屬性
1.11 autoOpen ，這個(gè)屬性為true的時(shí)候dialog被調(diào)用的時(shí)候自動(dòng)打開(kāi)dialog窗口。當(dāng)屬性為false的時(shí)候，一開(kāi)始隱藏窗口，知道.dialog("open")的時(shí)候才彈出dialog窗口。默認(rèn)為：true。
1.12 初始化例：請(qǐng)注意，$('.selector')是dialog 的類(lèi)名，在本例中.selector=#dialoag,以后不再說(shuō)明。
$('.selector').dialog({ autoOpen: false });
1.13 初始化后，得到和設(shè)置此屬性例：
//獲得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//設(shè)置
$('.selector').dialog('option', 'autoOpen', false);

1.21 bgiframe 默認(rèn)為false ，When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.
在IE6下，讓后面那個(gè)灰屏蓋住select。
1.22 初始化例：
$('.selector').dialog({ bgiframe: true });
1.23 初始化后，得到和設(shè)置：
//獲取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//設(shè)置
$('.selector').dialog('option', 'bgiframe', true);

1.31 buttons 顯示一個(gè)按鈕，并寫(xiě)上按鈕的文本，設(shè)置按鈕點(diǎn)擊函數(shù)。默認(rèn)為{}，沒(méi)有按鈕。
最上面的例子中已經(jīng)有buttons屬性的用法，請(qǐng)注意。
1.32 初始化例：
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
1.33 初始化后，得到和設(shè)置：
//獲取
var buttons = $('.selector').dialog('option', 'buttons');
//設(shè)置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 closeOnEscape 為true的時(shí)候，點(diǎn)擊鍵盤(pán)ESC鍵關(guān)閉dialog，默認(rèn)為true；
1.42 初始化例：
$('.selector').dialog({ closeOnEscape: false });
1.43 初始化后，得到和設(shè)置：
//獲取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//設(shè)置
$('.selector').dialog('option', 'closeOnEscape', false);

1.51 dialogClass 類(lèi)型將被添加到dialog，默認(rèn)為空
1.52 初始化例：
$('.selector').dialog({ dialogClass: 'alert' });
1.53 初始化后，得到和設(shè)置：
//獲取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//設(shè)置
$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 draggable、resizable : draggable是否可以使用標(biāo)題頭進(jìn)行拖動(dòng)，默認(rèn)為true，可以拖動(dòng);resizable是否可以改變dialog的大小，默認(rèn)為true，可以改變大小。
1.62 初始化例：
$('.selector').dialog({ draggable: false,resizable:false });
1.63 初始化后，得到和設(shè)置：
//獲取
var draggable = $('.selector').dialog('option', 'draggable');
//設(shè)置
$('.selector').dialog('option', 'draggable', false);

1.71 width、height ，dialog的寬和高，默認(rèn)為auto，自動(dòng)。
1.72 初始化例：
$('.selector').dialog({ height: 530,width:200 });
1.73 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.81 maxWidth、maxHeight、minWidth、minHeight ，dialog可改變的最大寬度、最大高度、最小寬度、最小高度。maxWidth、maxHeight的默認(rèn)為false，為不限。minWidth、minHeight的默認(rèn)為150。要使用這些屬性需要ui.resizable.js 的支持。
1.82 初始化例：
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
1.83 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.91 hide、show ，當(dāng)dialog關(guān)閉和打開(kāi)時(shí)候的效果。默認(rèn)為null，無(wú)效果
1.92 初始化例：最上面的實(shí)例中用到，請(qǐng)自己看吧。
1.93 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.101 modal,是否使用模式窗口，模式窗口打開(kāi)后，頁(yè)面其他元素將不能點(diǎn)擊，直到關(guān)閉模式窗口。默認(rèn)為false不是模式窗口。
1.102 初始化例：$('.selector').dialog({ modal: true });
1.103 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.111 title，dialog的標(biāo)題文字，默認(rèn)為空。
1.112 初始化例：見(jiàn)最上面的實(shí)例。1.113 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.121 position ，dialog的顯示位置：可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一個(gè)字符串?dāng)?shù)組例如['right','top']。
1.122 初始化例：$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.131 zIndex, dialog的zindex值，默認(rèn)值為1000.
1.132 初始化例：$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后，得到和設(shè)置：請(qǐng)參考1.63

1.141 stack 默認(rèn)值為true，當(dāng)dialog獲得焦點(diǎn)是，dialog將在最上面。
1.142 初始化例：$('.selector').dialog({ stack: false }); 1.143 初始化后，得到和設(shè)置：請(qǐng)參考1.63

2 事件
2.11 beforeclose 類(lèi)型dialogbeforeclose ，當(dāng)dialog嘗試關(guān)閉的時(shí)候此事件將被觸發(fā)，如果返回false，那么關(guān)閉將被阻止。
2.12 初始化例：$('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
2.13 使用類(lèi)型綁定此事件例：$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});

2.21 close 類(lèi)型：dialogclose ，當(dāng)dialog被關(guān)閉后觸發(fā)此事件。
2.22 初始化例：$('.selector').dialog({
close: function(event, ui) { ... }
});
2.23 使用類(lèi)型綁定此事件例：$('.selector').bind('dialogclose', function(event, ui) {
...
});

2.3 open 類(lèi)型：dialogopen ，當(dāng)dialog打開(kāi)時(shí)觸發(fā)。（篇幅有限，該省略的就省略了啊，初始化例和使用類(lèi)型綁定事件可以向上參考。）
2.4 focus 類(lèi)型：dialogfocus ，當(dāng)dialog獲得焦點(diǎn)時(shí)觸發(fā)。
2.5 dragStart 類(lèi)型：dragStart，當(dāng)dialog拖動(dòng)開(kāi)始時(shí)觸發(fā)。
2.6 drag 類(lèi)型：drag ，當(dāng)dialog被拖動(dòng)時(shí)觸發(fā)。
2.7 dragStop 類(lèi)型：dragStop ，當(dāng)dialog拖動(dòng)完成時(shí)觸發(fā)。
2.8 resizeStart 類(lèi)型：resizeStart ，當(dāng)dialog開(kāi)始改變窗體大小時(shí)觸發(fā)。
2.9 resize 類(lèi)型：resize，當(dāng)dialog被改變大小時(shí)觸發(fā)。
2.10 resizeStop 類(lèi)型：resizeStop，當(dāng)改變完大小時(shí)觸發(fā)。

3 方法
3.1 destroy ，我喜歡這個(gè)哦，摧毀地球。。。 例：.dialog( 'destroy' )
3.2 disable，dialog不可用，例：.dialog('disable');
3.3 enable,dialog可用，例，如3.2
3.4 close，open，關(guān)閉、打開(kāi)dialog
3.5 option ，設(shè)置和獲取dialog屬性，例如：.dialog( 'option' , optionName , [value] ) ，如果沒(méi)有value，將是獲取。
3.6 isOpen ，如果dialog打開(kāi)則返回true，例如：.dialog('isOpen')
3.7 moveToTop ,將dialog移到最上層，例如：.dialog( 'moveToTop' )

最新評(píng)論