jQuery UI dialog 參數說明

前段時間碰到個問題 jquery UI dialog彈出層 彈出多個層是 比方彈出兩個層A和B  B層假設顯示的數據表格太大，伸到了A層的外面，那伸到A層以外的部分就看不到了，因爲B層是在A層上彈出的 B的大小受到A層大小的限制

因而找到了這個資料 保存下來

-----------------------------------------------------------------------------------------------------

初始化參數

對於 dialog 來講，首先需要進行初始化，在調用 dialog 函數的時候，假設沒有傳遞參數，或者傳遞了一個對象，那麼就表示在初始化一個對話框。

沒有參數，表示依照默認的設置初始化對話框，在當前最新版本號的 jQuery UI 1.8.9 中， dialog 支持下列屬性。

autoOpen   初始化以後，是否立刻顯示對話框，默以爲 true

modal        是否模式對話框，默以爲 false

closeOnEscape   當用戶按 Esc 鍵以後，是否應該關閉對話框，默以爲 true

draggable  是否贊成拖動，默以爲 true

resizable    可否夠調整對話框的大小，默以爲 true

title           對話框的標題，可以是 html 串，好比一個超級連接。

position     用來設置對話框的位置，有三種設置方法

     1.  一個字符串，贊成的值爲  'center', 'left', 'right', 'top', 'bottom'.  此屬性的默認值即爲 'center'，表示對話框居中。
     2.  一個數組，包括兩個以像素爲單位的位置，好比， 

var  dialogOpts  =  {
    position: [ 100 ,  100 ]
};

     3. 一個字符串組成的數組，好比， ['right','top']，表示對話框將會位於窗體的右上角。

var  dialogOpts  =  {
    position: [ " left " ,  " bottom " ]
};

 

一組關於尺寸的屬性，以像素爲單位。

width     寬度, 默認 300

height    高度，默認 'auto'

minWidth     最小寬度，默認 150

minHeight    最小高度，默認 150

maxWidth   最大寬度

maxHeight   最大高度

 

還有關於關閉的效果

hide       當對話框關閉時的效果，默以爲 null, 好比， hide: 'slide'

show     當對話框打開時的效果。默以爲 null

 

堆疊

stack     對話框是否疊在其它對話框之上。默以爲 true

zIndex   對話框的 z-index 值，一個整數，越大越在上面。默認 1000

 

button

buttons   一個對象，屬性名將會被做爲button的提示文字，屬性值爲一個函數，即button的處理函數。

var  dialogOpts  =  {
   buttons: {
       " Ok " :  function () { } ,
       " Cancel " :  function () {}
   }
}
$( " #myDialog " ).dialog(dialogOpts);

 

IE6 的 select 元素穿透問題

bgiframe     解決 IE6 的 select 元素穿透問題，經過添加一個 iframe 來解決。默以爲  true

這一功能需要使用腳本 jquery.bgiframe-2.1.2，腳本在 jQuery UI 壓縮包中 development-bundle/external 目錄中，需要將這個文件增長到頁面中。

< script src = " ../jquery-1.4.4.js " >< / script>
< script src = " ../external/jquery.bgiframe-2.1.2.js " >< / script>
< script src = " ../ui/jquery.ui.core.js " >< / script>

 

這個控件現在有一個bug,在彈出窗體有遮罩層的狀況下，在chrome下，假設出現縱向滾動欄，沒法用鼠標拖動，僅僅能使用滾輪。

上邊的說明來自 王洋

設置前

設置後

 

演示樣例

$( " #dialog " ).dialog({
    bgiframe:  true ,
    resizable:  false ,
    height: 140 ,
    modal:  true ,
    overlay: {
        backgroundColor:  ' #000 ' ,
        opacity:  0.5
    },
    buttons: {
         ' Delete all items in recycle bin ' :  function () {
            $( this ).dialog( ' close ' );
        },
        Cancel:  function () {
            $( this ).dialog( ' close ' );
        }
    }
});

效果例如如下。

 

對話框的方法

初始化以後，就可以使用對話框了，比方說打開對話框，關閉對話框，這需要經過對話框的方法來完畢。

對話框的方法需要經過調用 dialog 函數，並傳遞字符串形式的方法來完畢。好比，dialog( "open" )  表示調用對話框的 open 方法。

open     打開對話框，需要注意的是，並無 open() 方法，而是經過 dialog( "open" ) 來調用。好比，  .dialog( "open" )

close     關閉對話框

$( this ).dialog( ' close ' );

destroy  摧毀一個對話框，去除對話框功能，將元素還原爲初始化以前的狀態。

isOpen   檢查對話框的狀態，假設已經打開，返回 true.

moveToTop  將對話框移到對話框的頂端

option    設置或者讀取對話框某個屬性的值，有兩種使用方法。

    假設第二個參數爲字符串，假設提供了三個參數，表示設置，假設兩個參數，表示讀取。 好比 .dialog( "option" , optionName , [value] )

    假設第二個參數爲對象，表示一次性設置多個屬性。

enable   啓用對話框

disable  禁用對話框

對話框的事件

在對話框使用過程當中，還將觸發多種事件，咱們可以本身定義事件處理函數進行響應。

create

open

focus

dragStart

drag

dragStop

resizeStart

resize

resizeStop

beforeClose

close

好比，如下的設置了 open，close，beforeClose 的事件處理，顯示窗體的狀態。

var  dialogOpts  =  {
     open:  function () {
             $( " #status " ).find( " .ui-widget-content " ).text( " The dialog is open " );
         },
     close:  function () {
             $( " #status " ).find( " .ui-widget-content " ).text( " The dialog is closed " );
         },
     beforeclose:  function () {
              if  (parseInt($( " .ui-dialog " ).css( " width " ))  ==   300   ||
                 parseInt($( " .ui-dialog " ).css( " height " ))  ==   300 ) {
                return   false
             }
         }
};
$( " #myDialog " ).dialog(dialogOpts);

 效果例如如下

 

對話框使用常見問題

常見的問題就是屢次初始化一個對話框。

對話框只需要初始化一次，屢次初始化會有問題。