建站
咨詢
售后
建站咨詢
新聞中心
jquery ui 提供了強大的dialog功能，基本能滿足開發(fā)的功能。
成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)會澤,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
一、先上一個簡單的例子：
1、代碼如下
這是一個彈出窗口---from ifxoxo.com
2、效果截圖
jquery-ui-dialog截圖 –ifxoxo.com
二、具體用法還是簡單的，總結(jié)如下：
1、需要加載的js和css
請記住jquery 一定要在jquery-ui之前加載，加載錯的會導(dǎo)致意想不到的結(jié)果。
（1）jquery
（2）jquery-ui
（3）jquery-ui的css
2、頁面上的html
頁面上需要一個裝dialog的容器，需要一個固定ID,控制彈出窗口的內(nèi)容，而html有兩種方式：
（1）事先寫在頁面上（比如一個table,form）
這里是窗口里面顯示的內(nèi)容 --ifxoxo.com
（2）不同情況的加載內(nèi)容，可以定義一個空標簽，待js加載 (或者ajax加載)
3、觸發(fā)窗口彈出的js
主要函數(shù)如下：$(“dialog_div”).dialog();
dialog函數(shù)有一個強大的參數(shù)庫，如下
【參數(shù)】
| 參數(shù) | 默認值 | 作用 |
| autoOpen | true | 是否自動打開dialog窗口。當(dāng)屬性為false的時候，一開始隱藏窗口， 直到.dialog(“open”)的時候才彈出dialog窗口 |
| buttons | {} | 顯示一個按鈕，并寫上按鈕的文本，設(shè)置按鈕點擊函數(shù) |
| closeOnEscpe | true | 是否點擊鍵盤ESC鍵關(guān)閉dialog |
| dialogClass | null | 為窗口加上的class屬性 |
diaggable resizable | true | 是否能拖動、縮放 （必須加載相應(yīng)的js） |
width height | auto | 窗口的長寬 |
maxWidth maxHeight | null | 長寬的最大值 |
minWidth minHeight | 150 | 長寬的最小值 |
hide show | null | 當(dāng)dialog關(guān)閉和打開時候的效果。（必須加載相應(yīng)的jquery.effects.xx.js） 效果有：blind,bounce,clip,drop,explode,fade,fold,
|
| modal | false | 是否使用模式窗口，模式窗口打開后，頁面其他元素將不能點擊，直到關(guān)閉模式窗口 |
| title | null | dialog的標題文字 |
| position | center | dialog的顯示位置：可以是’center’, ‘left’, ‘right’,
|
| zIndex | 1000 | dialog的zindex值 |
| stack | true | 是否在dialog獲得焦點是，dialog將在最上面 |
| bgiframe | false | 在IE6下，讓后面那個灰屏蓋住select(需要調(diào)用jquery.bgiframe.js) |
| disabled | false | 當(dāng)為true是，關(guān)掉這個dialog |
示例代碼如下：
這是彈框的內(nèi)容---ifxoxo.com
4、其他
1、事件
(1) beforeclose當(dāng)dialog嘗試關(guān)閉的時候此事件將被觸發(fā)，如果返回false，那么關(guān)閉將被阻止
(2) close關(guān)閉dialog的時候此事件將被觸發(fā)
(3) open打開dialog的時候此事件將被觸發(fā)
(4) focus獲得焦點的時候此事件將被觸發(fā)
(5) dragStart開始拖動dialog的時候此事件將被觸發(fā)
(6) drag拖動dialog過程此事件將被觸發(fā)
(7) resizeStart開始縮放dialog的時候此事件將被觸發(fā)
(8) resize縮放dialog過程的時候此事件將被觸發(fā)
(9) resizeStop縮放結(jié)束的時候此事件將被觸發(fā)
beforeclose:function(event, ui){ ... }
});
2、方法
(1)destroy摧毀 例：.dialog( ‘destroy’ )
(2)disabledialog不可用，例：.dialog(‘disable’);
(3)enabledialog可用，
(4)close，open關(guān)閉、打開dialog
(5)option設(shè)置和獲取dialog屬性，
例如：.dialog( ‘option’ , optionName , [value] ) ，如果沒有value，將是獲取。
(6)isOpen如果dialog打開則返回true，例如：.dialog(‘isOpen’)
(7)moveToTop將dialog移到最上層，例如：.dialog( ‘moveToTop’ )。
$("#opener").click(function(){
$("#dialog").dialog("open");
returnfalse;
});
});
三、其他相關(guān)聯(lián)文章
1、jquery ui（一）簡介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進度條 progressbar
5、jquery ui（五）日期選擇器 datepicker
分享名稱：jqueryui（三）彈出窗口dialog
路徑分享：http://www.dlmjj.cn/article/jcogjs.html
