jquery dialog 屬性詳解
阿新 • • 發佈：2019-02-20
http://hi.baidu.com/vevoly/blog/item/d61c7189a7eb73bb0e2444f7.html 還是先看例子吧。另外如果要拖動、改變dialog的大小的話要加上ui.draggble.js和ui.resizable.js <!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script> <script> $("#dialog").dialog({autoOpen:false,buttons:{"確 定":function() {$(this).dialog("close");}},closeOnEscape:true,hide:"slide",modal:true,title:" 對 話 框"}).dialog("open"); </script> <div id="dialog" title="Dialog Title">你是個豬頭！</div> 1 屬性 1.11 autoOpen ，這個屬性為true的時候dialog被呼叫的時候自動開啟dialog視窗。當屬性為false的時候，一開始隱藏視窗，知道.dialog("open")的時候才彈出dialog視窗。預設為：true。 1.12 初始化例：請注意，$('.selector')是dialog 的類名，在本例中.selector=#dialoag,以後不再說明。 $('.selector').dialog({ autoOpen: false }); 1.13 初始化後，得到和設定此屬性例： //獲得 var autoOpen = $('.selector').dialog('option', 'autoOpen'); //設定 $('.selector').dialog('option', 'autoOpen', false); 1.21 bgiframe 預設為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.暫時沒有弄明白是做什麼用的。誰知道的話，請告訴我啊。 補充說明：bgiframe 用來設定dialog 和 select 等層控制元件的相對位置````` 不設定的時候,就會出現select等控制元件擋在你的dialog上面 ，在IE6中。1.22 初始化例： $('.selector').dialog({ bgiframe: true }); 1.23 初始化後，得到和設定： //獲取 var bgiframe = $('.selector').dialog('option', 'bgiframe'); //設定 $('.selector').dialog('option', 'bgiframe', true); 1.31 buttons 顯示一個按鈕，並寫上按鈕的文字，設定按鈕點選函式。預設為{}，沒有按鈕。 最上面的例子中已經有buttons屬性的用法，請注意。 1.32 初始化例： $('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } }); 1.33 初始化後，得到和設定： //獲取 var buttons = $('.selector').dialog('option', 'buttons'); //設定 $('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } }); 1.41 closeOnEscape 為true的時候，點選鍵盤ESC鍵關閉dialog，預設為true； 1.42 初始化例： $('.selector').dialog({ closeOnEscape: false }); 1.43 初始化後，得到和設定： //獲取 var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape'); //設定 $('.selector').dialog('option', 'closeOnEscape', false); 1.51 dialogClass 型別將被新增到dialog，預設為空 1.52 初始化例： $('.selector').dialog({ dialogClass: 'alert' }); 1.53初始化後，得到和設定： //獲取 var dialogClass = $('.selector').dialog('option', 'dialogClass'); //設定 $('.selector').dialog('option', 'dialogClass', 'alert'); 1.61 draggable、resizable : draggable是否可以使用標題頭進行拖動，預設為true，可以拖動;resizable是否可以改變dialog的大小，預設為true，可以改變大小。 1.62 初始化例： $('.selector').dialog({ draggable: false,resizable:false }); 1.63 初始化後，得到和設定： //獲取 var draggable = $('.selector').dialog('option', 'draggable'); //設定 $('.selector').dialog('option', 'draggable', false); 1.71 width、height ，dialog的寬和高，預設為auto，自動。 1.72 初始化例： $('.selector').dialog({ height: 530,width:200 }); 1.73 初始化後，得到和設定：請參考1.63 1.81 maxWidth、maxHeight、minWidth、minHeight ，dialog可改變的最大寬度、最大高度、最小寬度、最小高度。maxWidth、maxHeight的預設為false，為不限。minWidth、 minHeight的預設為150。要使用這些屬性需要ui.resizable.js 的支援。 1.82 初始化例： $('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 }); 1.83 初始化後，得到和設定：請參考1.63 1.91 hide、show ，當dialog關閉和開啟時候的效果。預設為null，無效果 1.92 初始化例：最上面的例項中用到，請自己看吧。 1.93 初始化後，得到和設定：請參考1.63 1.101 modal,是否使用模式視窗，模式視窗開啟後，頁面其他元素將不能點選，直到關閉模式視窗。預設為false不是模式視窗。 1.102 初始化例：$('.selector').dialog({ modal: true }); 1.103 初始化後，得到和設定：請參考1.63 1.111 title，dialog的標題文字，預設為空。 1.112 初始化例：見最上面的例項。1.113 初始化後，得到和設定：請參考1.63 1.121 position ，dialog的顯示位置：可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一個字串陣列例如['right','top']。 1.122 初始化例：$('.selector').dialog({ position: ['top','right'] }); 1.123初始化後，得到和設定：請參考1.63 1.131 zIndex, dialog的zindex值，預設值為1000. 1.132 初始化例：$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化後，得到和設定：請參考1.63 1.141 stack 預設值為true，當dialog獲得焦點是，dialog將在最上面。 1.142 初始化例：$('.selector').dialog({ stack: false }); 1.143 初始化後，得到和設定：請參考1.63 2 事件 2.11 beforeclose型別dialogbeforeclose ， 當dialog嘗試關閉的時候此事件將被觸發，如果返回false，那麼關閉將被阻止。 2.12 初始化例：$('.selector').dialog({ beforeclose: function(event, ui) { ... } }); 2.13 使用型別繫結此事件例：$('.selector').bind('dialogbeforeclose', function(event, ui) { ... }); 2.21 close型別：dialogclose ，當dialog被關閉後觸發此事件。 2.22 初始化例：$('.selector').dialog({ close: function(event, ui) { ... } }); 2.23 使用型別繫結此事件例：$('.selector').bind('dialogclose', function(event, ui) { ... }); 2.3 open 型別：dialogopen ，當dialog開啟時觸發。（篇幅有限，該省略的就省略了啊，初始化例和使用型別繫結事件可以向上參考。） 2.4 focus 型別：dialogfocus ，當dialog獲得焦點時觸發。 2.5 dragStart 型別：dragStart，當dialog拖動開始時觸發。 2.6 drag 型別：drag ，當dialog被拖動時觸發。 2.7 dragStop 型別：dragStop ，當dialog拖動完成時觸發。 2.8 resizeStart 型別：resizeStart ，當dialog開始改變窗體大小時觸發。 2.9 resize 型別：resize，當 dialog被改變大小時觸發。 2.10 resizeStop 型別：resizeStop，當改變完大小時觸發。 3 方法 3.1destroy ，我喜歡這個哦，摧毀地球。。。 例：.dialog( 'destroy' ) 3.2 disable，dialog不可用，例：.dialog('disable'); 3.3 enable,dialog可用，例，如3.2 3.4 close，open，關閉、開啟dialog 3.5 option ，設定和獲取dialog屬性，例如：.dialog( 'option' , optionName , [value]) ，如果沒有value，將是獲取。 3.6 isOpen ，如果dialog開啟則返回true，例如：.dialog('isOpen') 3.7 moveToTop ,將dialog移到最上層，例如：.dialog( 'moveToTop' )
轉載自：http://www.cnblogs.com/a475334705/archive/2012/07/14/2591335.html