jQuery UI dialog 引數說明

2021-09-06 21:32:26 字數 3597 閱讀 8283

前段時間碰到個問題 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

button

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

vardialogopts = ,

"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(,

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...