jQuery UI庫中dialog對話框功能使用全解析
更新時間：2016年04月23日 11:45:45 作者：初心始終鈺
這篇文章主要介紹了jQuery UI庫中dialog對話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下
對話框（dialog），是jQuery UI 非常重要的一個功能。它徹底的代替了JavaScript
的alert()、prompt()等方法，也避免了新窗口或頁面的繁雜冗余。
一．開啟多個dialog
只要設(shè)置不同的id 即可實現(xiàn)。
$('#x').dialog();
$('#y').dialog();
二．修改dialog 樣式
在彈出的dialog 對話框中，在火狐瀏覽器中打開Firebug 或者右擊->查看
元素?？梢钥纯磀ialog 的樣式，對dialog 的標(biāo)題背景進(jìn)行修改。
//無須修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}
三．dialog()方法的屬性
對話框方法有兩種形式：1.dialog(options)，options 是以對象鍵值對的形式
傳參，每個鍵值對表示一個選項；2.dialog('action', param)，action 是操作對
話框方法的字符串，param則是options 的某個選項。
| 屬性 |
默認(rèn)值/類型 |
說明 |
| title |
無/字符串 |
對話框的標(biāo)題，可以直接設(shè)置在DOM 元素上 |
| buttons |
無/對象 |
以對象鍵值對方式，給dialog 添加按鈕。鍵是按鈕
的名稱，值是用戶點擊后調(diào)用的回調(diào)函數(shù)
|
$('#reg').dialog({
title : '注冊',
buttons : {
'按鈕' : function () {}
}
);
| 屬性 |
默認(rèn)值/類型 |
說明 |
| position |
center/字符串 |
設(shè)置一個對話框窗口的坐標(biāo)位置，默認(rèn)為center。
其他設(shè)置值為：left top、top right、bottom left、
right bottom（四個角）、top、bottom（頂部或底
部，寬度居中）、left 或right（左邊或右邊，高度
居中）、center（默認(rèn)值）
|
$('#reg').dialog({
position : 'left top'
});
| 屬性 |
默認(rèn)值/類型 |
說明 |
| width |
300/數(shù)值 |
對話框的寬度。默認(rèn)為300，單位是像素。 |
| height |
auto/數(shù)值 |
對話框的高度。默認(rèn)為auto，單位是像素。 |
| minWidth |
150/數(shù)值 |
對話框的最小寬度。默認(rèn)150，單位是像素。 |
| minHeight |
150/數(shù)值 |
對話框的最小高度。默認(rèn)150，單位是像素。 |
| maxWidth |
auto/數(shù)值 |
對話框的最大寬度。默認(rèn)auto，單位是像素。 |
| maxHeight |
auto/數(shù)值 |
對話框的最大高度。默認(rèn)auto，單位是像素。 |
$('#reg').dialog({
height : 500,
width : 500,
minWidth : 300,
minHeight : 300,
maxWidth : 800,
maxHeight : 600
});
| 屬性 |
默認(rèn)值/類型 |
說明 |
| show |
false/布爾值 |
顯示對話框時，默認(rèn)采用淡入效果。 |
| hide |
false 布爾值 |
關(guān)閉對話框時，默認(rèn)采用淡出效果。 |
$('#reg').dialog({
show : true,
hide : true
});
注意：設(shè)置true 后，默認(rèn)為淡入淡出，如果想使用別的特效，可以使用以下表格中的字符串參數(shù)。
| 特效名稱 |
說明 |
| blind |
對話框從頂部顯示或消失 |
| bounce |
對話框斷斷續(xù)續(xù)地顯示或消失，垂直運動 |
| clip |
對話框從中心垂直地顯示或消失 |
| slide |
對話框從左邊顯示或消失 |
| drop |
對話框從左邊顯示或消失，有透明度變化 |
| fold |
對話框從左上角顯示或消失 |
| highlight |
對話框顯示或消失，伴隨著透明度和背景色的變化 |
| puff |
對話框從中心開始縮放。顯示時“收縮”，消失時“生長” |
| scale |
對話框從中心開始縮放。顯示時“生長”，消失時“收縮” |
| pulsate |
對話框以閃爍形式顯示或消失 |
$('#reg').dialog({
show : 'blind',
hide : 'blind'
});
| 屬性 |
默認(rèn)值/類型 |
說明 |
| autoOpen |
true/布爾值 |
默認(rèn)為true，調(diào)用dialog()方法時就會打開對話框；
如果為false，對話框不可見，但對話框已創(chuàng)建，可
以通過dialog('open')才能可見。
|
| draggable |
true/布爾值 |
默認(rèn)為true，可以移動對話框，false 無法移動。 |
| resizable |
true/布爾值 |
默認(rèn)為true，可以調(diào)整對話框大小，false 無法調(diào)整 |
| modal |
false/布爾值 |
默認(rèn)為false，對話框外可操作，true 對話框會遮罩
一層灰紗，無法操作。
|
| closeText |
無/字符串 |
設(shè)置關(guān)閉按鈕的title 文字 |
$('#reg').dialog({
autoOpen : false,
draggable : false,
resizable : false,
modal : true,
closeText : '關(guān)閉'
});
四．dialog()方法的事件
除了屬性設(shè)置外，dialog()方法也提供了大量的事件。這些事件可以給各種不同狀態(tài)
時提供回調(diào)函數(shù)。這些回調(diào)函數(shù)中的this 值等于對話框內(nèi)容的div 對象，不是整個對話框
的div。
| 事件名 |
說明 |
| focus |
當(dāng)對話框被激活時（首次顯示以及每次在上面點擊）會
調(diào)用focus 方法，該方法有兩個參數(shù)(event, ui)。此事件中
的ui 參數(shù)為空。
|
| create |
當(dāng)對話框被創(chuàng)建時會調(diào)用create 方法，該方法有兩個參
數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
|
| open |
當(dāng)對話框被顯示時（首次顯示或調(diào)用dialog('open')方法）
會調(diào)用open 方法，該方法有兩個參數(shù)(event, ui)。此事件
中的ui 參數(shù)為空。
|
| beforeClose |
當(dāng)對話框?qū)⒁P(guān)閉時（ 當(dāng)單擊關(guān)閉按鈕或調(diào)用
dialog('close')方法），會調(diào)用beforeclose 方法。如果該函
數(shù)返回false，對話框?qū)⒉粫魂P(guān)閉。關(guān)閉的對話框可以
用dialog('open')重新打開。該方法有兩個參數(shù)(event, ui)。
此事件中的ui 參數(shù)為空。
|
| close |
當(dāng)對話框?qū)⒁P(guān)閉時（ 當(dāng)單擊關(guān)閉按鈕或調(diào)用
dialog('close')方法），會調(diào)用close 方法。關(guān)閉的對話框可
以用dialog('open')重新打開。該方法有兩個參數(shù)(event,
ui)。此事件中的ui 參數(shù)為空。
|
| drag |
當(dāng)對話框移動時，每次移動一點均會調(diào)用drag 方法。該
方法有兩個參數(shù)。該方法有兩個參數(shù)(event, ui)。此事件
中的ui 有兩個屬性對象：
1.position，得到當(dāng)前移動的坐標(biāo)，有兩個子屬性：top 和
left。
2.offset，得到當(dāng)前移動的坐標(biāo)，有兩個子屬性：top 和left。
|
| dragStart |
當(dāng)開始移動對話框時，會調(diào)用dragStart 方法。該方法有
兩個參數(shù)(event, ui)。此事件中的ui 有兩個屬性對象：
1.position，得到當(dāng)前移動的坐標(biāo)，有兩個子屬性：top 和
left。
2.offset，得到當(dāng)前移動的坐標(biāo)，有兩個子屬性：top 和left。
|
| dragStop |
當(dāng)開始移動對話框時，會調(diào)用dragStop 方法。該方法有
兩個參數(shù)(event, ui)。此事件中的ui 有兩個屬性對象：
1.position，得到當(dāng)前移動的坐標(biāo)，有兩個子屬性：top 和
left。
2.offset，得到當(dāng)前移動的坐標(biāo)，有兩個子屬性：top 和left。
|
| resize |
當(dāng)對話框拉升大小的時候，每一次拖拉都會調(diào)用resize
方法。該方法有兩個參數(shù)(event, ui)。此事件中的ui 有四
個屬性對象：
1.size，得到對話框的大小，有兩個子屬性：width 和
height。
2.position，得到對話框的坐標(biāo)，有兩個子屬性：top 和left。
3.originalSize，得到對話框原始的大小，有兩個子屬性：
width 和height。
4.originalPosition，得到對話框原始的坐標(biāo)，有兩個子屬
性：top 和left。
|
| resizeStart |
當(dāng)開始拖拉對話框時，會調(diào)用resizeStart 方法。該方法有
兩個參數(shù)(event, ui)。此事件中的ui 有四個屬性對象：
1.size，得到對話框的大小，有兩個子屬性：width 和
height。
2.position，得到對話框的坐標(biāo)，有兩個子屬性：top 和left。
3.originalSize，得到對話框原始的大小，有兩個子屬性：
width 和height。
4.originalPosition，得到對話框原始的坐標(biāo)，有兩個子屬
性：top 和left。
|
| resizeStop |
當(dāng)結(jié)束拖拉對話框時，會調(diào)用resizeStart 方法。該方法有
兩個參數(shù)(event, ui)。此事件中的ui 有四個屬性對象：
1.size，得到對話框的大小，有兩個子屬性：width 和
height。
2.position，得到對話框的坐標(biāo)，有兩個子屬性：top 和left。
3.originalSize，得到對話框原始的大小，有兩個子屬性：
width 和height。
4.originalPosition，得到對話框原始的坐標(biāo)，有兩個子屬
性：top 和left。
|
//當(dāng)對話框獲得焦點后
$('#reg').dialog({
focus : function (e, ui) {
alert('獲得焦點');
}
});
//當(dāng)創(chuàng)建對話框時
$('#reg').dialog({
create : function (e, ui) {
alert('創(chuàng)建對話框');
}
});
//當(dāng)將要關(guān)閉時
$('#reg').dialog({
beforeClose : function (e, ui) {
alert('關(guān)閉前做的事！');
return flag;
}
});
//關(guān)閉對話框時
$('#reg').dialog({
close : function (e, ui) {
alert('關(guān)閉！');
}
});
//對話框移動時
$('#reg').dialog({
drag : function (e, ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//對話框開始移動時
$('#reg').dialog({
dragStart : function (e, ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//對話框結(jié)束移動時
$('#reg').dialog({
dragStop : function (e, ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//調(diào)整對話框大小時
$('#reg').dialog({
resize : function (e, ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
//開始調(diào)整對話框大小時
$('#reg').dialog({
resizeStart : function (e, ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
//結(jié)束調(diào)整對話框大小時
$('#reg').dialog({
resizeStop : function (e, ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
| 方法 |
返回值 |
說明 |
| dialog('open') |
jQuery 對象 |
打開對話框 |
| dialog('close') |
jQuery 對象 |
關(guān)閉對話框 |
| dialog('destroy') |
jQuery 對象 |
刪除對話框，直接阻斷了dialog |
| dialog('isOpen') |
布爾值 |
判斷對話框是否打開狀態(tài) |
| dialog('widget') |
jQuery 對象 |
獲取對話框的jQuery 對象 |
| dialog('option', param) |
一般值 |
獲取options 屬性的值 |
| dialog('option', param, value) |
jQuery 對象 |
設(shè)置options 屬性的值 |
//初始隱藏對話框
$('#reg').dialog({
autoOpen : false
});
//打開對話框
$('#reg_a').click(function () {
$('#reg').dialog('open');
});
//關(guān)閉對話框
$('#reg').click(function () {
$('#reg').dialog('close');
});
//判斷對話框打開或關(guān)閉狀態(tài)
$(document).click(function () {
alert($('#reg').dialog('isOpen'));
});
//將指定對話框置前
$(document).click(function () {
$('#reg').dialog('moveToTop');
});
//獲取某個options 的param 選項的值
var title = $('#reg').dialog('option', 'title');
alert(title);
//設(shè)置某個options 的param 選項的值
$('#reg').dialog('option', 'title', '注冊');
五．dialog 中使用on()
在dialog 的事件中，提供了使用on()方法處理的事件方法。
| 特效名稱 |
說明 |
| dialogfocus |
得到焦點時觸發(fā) |
| dialogopen |
顯示時觸發(fā) |
| dialogbeforeclose |
將要關(guān)閉時觸發(fā) |
| dialogclose |
關(guān)閉時觸發(fā) |
| dialogdrag |
每一次移動時觸發(fā) |
| dialogdragstart |
開始移動時觸發(fā) |
| dialogdragstop |
移動結(jié)束后觸發(fā) |
| dialogresize |
每次調(diào)整大小時觸發(fā) |
| dialogresizestart |
開始調(diào)整大小時觸發(fā) |
| dialogresizestop |
結(jié)束調(diào)整大小時觸發(fā) |
$('#reg').on('dialogclose', function () {
alert('關(guān)閉');
});
您可能感興趣的文章:
- JQuery EasyUI 對話框的使用方法
- jQuery Dialog 彈出層對話框插件
- 基于jQuery的彈出警告對話框美化插件(警告，確認(rèn)和提示)
- jQuery UI Dialog 創(chuàng)建友好的彈出對話框?qū)崿F(xiàn)代碼
- jquery刪除提示框彈出是否刪除對話框
- 修改jquery里的dialog對話框插件為框架頁(iframe) 的方法
- Confirmer JQuery確認(rèn)對話框組件
- jQuery EasyUI API 中文文檔 - Dialog對話框
- jBox 2.3基于jquery的最新多功能對話框插件 常見使用問題解答
- jquery實現(xiàn)點擊彈出對話框
相關(guān)文章
jQuery中把ajax封裝得非常好。但是日常開發(fā)中，我偶爾還是會遇到ajax報錯。本文進(jìn)行簡單分析一下ajax報錯。需要的朋友可以參考下2016-12-12
這篇文章主要介紹了jquery實現(xiàn)選中單選按鈕下拉伸縮效果的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,該功能可用于動態(tài)顯示特定內(nèi)容(如發(fā)票打印等),需要的朋友可以參考下2015-08-08
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應(yīng)方法DOM對象不能使用，而DOM對象的相應(yīng)方法jquery也不能使用。所以在具體項目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04
使用ajaxfileupload.js實現(xiàn)ajax上傳文件php版
這篇文章主要介紹了使用ajaxfileupload.js實現(xiàn)ajax上傳文件php版,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了Jquery實現(xiàn)下拉菜單案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
jquery.autocomplete修改實現(xiàn)鍵盤上下鍵自動填充示例
根據(jù)需求要實現(xiàn)通過鍵盤上下移動，獲得聯(lián)想菜單中的值，如同google baidu的查詢功能，下面的代碼是自己手寫的，喜歡的朋友可以嘗試操作下2013-11-11
這篇文章主要介紹了JQuery包裹DOM節(jié)點的方法,實例分析了wrap與wrapAll方法實現(xiàn)包裹DOM節(jié)點的技巧與相關(guān)注意事項,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄猨Query實現(xiàn)div橫向拖拽排序的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了Jquery插件編寫簡明教程,jquery插件開發(fā)實例,需要的朋友可以參考下2014-03-03
JQuery擴展插件Validate—4設(shè)置錯誤提示的樣式
JQuery擴展插件Validate—4設(shè)置錯誤提示的樣式,使用Validate的朋友可以參考下。2011-09-09