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