jQuery UI dialog 引數說明

2021-09-29 05:41:06 字數 3184 閱讀 7394

前段時間碰到個問題 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.  乙個陣列,包含兩個以畫素為單位的位置,例如, 

vardialogopts =;

3. 乙個字串組成的陣列,例如, ['right','top'],表示對話方塊將會位於視窗的右上角。

vardialogopts =;

一組關於尺寸的屬性,以畫素為單位。

width     寬度, 預設 300

height    高度,預設 'auto'

minwidth     最小寬度,預設 150

minheight    最小高度,預設 150

maxwidth   最大寬度

maxheight   最大高度

還有關於關閉的效果

hide       當對話方塊關閉時的效果,預設為 null, 例如, hide: 'slide'

show     當對話方塊開啟時的效果。預設為 null

堆疊stack     對話方塊是否疊在其他對話方塊之上。預設為 true

zindex   對話方塊的 z-index 值,乙個整數,越大越在上面。預設 1000

按鈕buttons   乙個物件,屬性名將會被作為按鈕的提示文字,屬性值為乙個函式,即按鈕的處理函式。

vardialogopts = ,

"cancel": function() {}}}

$("#mydialog").dialog(dialogopts);

ie6 的 select 元素穿透問題

bgiframe     解決 ie6 的 select 元素穿透問題,通過增加乙個 iframe 來解決。預設為  true

這一功能需要使用指令碼 jquery.bgiframe-2.1.2,指令碼在 jquery ui 壓縮包中 development-bundle/external 資料夾中,需要將這個檔案加入到頁面中。

這個控制項現在有乙個bug,在彈出視窗有遮罩層的情況下,在chrome下,如果出現縱向滾動條,無法用滑鼠拖動,只能使用滾輪。

上邊的說明來自 王洋

設定前

設定後

示例$("#dialog").dialog(,

buttons: ,

cancel: function() 

}});

效果如下。

初始化之後,就可以使用對話方塊了,比如說開啟對話方塊,關閉對話方塊,這需要通過對話方塊的方法來完成。

對話方塊的方法需要通過呼叫 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 的事件處理,顯示視窗的狀態。

vardialogopts =,

close: function() ,

beforeclose: function() }};

$("#mydialog").dialog(dialogopts);

效果如下

常見的問題就是多次初始化乙個對話方塊。

對話方塊僅僅需要初始化一次,多次初始化會有問題。

jQuery UI dialog 引數說明

前段時間碰到個問題 jquery ui dialog彈出層 彈出多個層是 比方彈出兩個層a和b b層假設顯示的資料 太大,伸到了a層的外面,那伸到a層之外的部分就看不到了,由於b層是在a層上彈出的 b的大小受到a層大小的限制 於是找到了這個資料 儲存下來 初始化引數 對於 dialog 來說,首先須...

jquery ui dialog 的學習與使用

乙個對話方塊是乙個浮動視窗,其中包含乙個標題欄和內容領域。對話方塊視窗可以移動,調整大小,並與 的預設圖示關閉。如果內容長度超過了最大高度,滾動條會自動出現。底部按鈕欄和半透明的覆蓋層的模式,可以新增常用的選項。a至 foo dialog 呼叫 foo dialog 初始化的對話方塊例項,並會自動開...

JqueryUI Dialog 載入動態頁 部分頁

問題 使用jqueryuidialog 載入部分頁,可以彈出對話方塊,但是在操作頁面上的按鈕是提示 dialog 找不到,思路是,先取到部分頁載入到要dialog的div上,在dialog出來,如下,問題 pushaisburse click function 取消 function close f...