jQuery UI dialog 的使用

jQuery UI dialog 的使用

上一篇文章分享了一下 jQuery UI dialog 的簡單使用，看到這麼多同窗都在學習，就將 jQuery UI dialog 的使用總結一下，也爲學習其餘的 jQuery UI 打個基礎。

 

初始化參數

對於 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

 

按鈕

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

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

 效果以下

 

對話框使用常見問題

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

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

Nemikor 在 Blog 中說明了這個問題，Basic usage of the jQuery UI dialog，而且給出了一個示例，示例的地址

 學習資源

人民郵電出版社的 jQuery用戶界面庫學習指南 是目前惟一的一本中文資料。只不過版本有點老，是 1.6 版。