jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
更新時(shí)間：2016年04月23日 11:45:45 作者：初心始終鈺
這篇文章主要介紹了jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下
對(duì)話框（dialog），是jQuery UI 非常重要的一個(gè)功能。它徹底的代替了JavaScript
的alert()、prompt()等方法，也避免了新窗口或頁(yè)面的繁雜冗余。
一．開啟多個(gè)dialog
只要設(shè)置不同的id 即可實(shí)現(xiàn)。
$('#x').dialog();
$('#y').dialog();
二．修改dialog 樣式
在彈出的dialog 對(duì)話框中，在火狐瀏覽器中打開Firebug 或者右擊->查看
元素?？梢钥纯磀ialog 的樣式，對(duì)dialog 的標(biāo)題背景進(jìn)行修改。
//無(wú)須修改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)值/類型 |
說(shuō)明 |
| title |
無(wú)/字符串 |
對(duì)話框的標(biāo)題，可以直接設(shè)置在DOM 元素上 |
| buttons |
無(wú)/對(duì)象 |
以對(duì)象鍵值對(duì)方式，給dialog 添加按鈕。鍵是按鈕
的名稱，值是用戶點(diǎn)擊后調(diào)用的回調(diào)函數(shù)
|
$('#reg').dialog({
title : '注冊(cè)',
buttons : {
'按鈕' : function () {}
}
);
| 屬性 |
默認(rèn)值/類型 |
說(shuō)明 |
| 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)值/類型 |
說(shuō)明 |
| 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)值/類型 |
說(shuō)明 |
| 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ù)。
| 特效名稱 |
說(shuō)明 |
| 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)值/類型 |
說(shuō)明 |
| autoOpen |
true/布爾值 |
默認(rèn)為true，調(diào)用dialog()方法時(shí)就會(huì)打開對(duì)話框；
如果為false，對(duì)話框不可見，但對(duì)話框已創(chuàng)建，可
以通過(guò)dialog('open')才能可見。
|
| draggable |
true/布爾值 |
默認(rèn)為true，可以移動(dòng)對(duì)話框，false 無(wú)法移動(dòng)。 |
| resizable |
true/布爾值 |
默認(rèn)為true，可以調(diào)整對(duì)話框大小，false 無(wú)法調(diào)整 |
| modal |
false/布爾值 |
默認(rèn)為false，對(duì)話框外可操作，true 對(duì)話框會(huì)遮罩
一層灰紗，無(wú)法操作。
|
| closeText |
無(wú)/字符串 |
設(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。
| 事件名 |
說(shuō)明 |
| 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);
}
});
| 方法 |
返回值 |
說(shuō)明 |
| 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()方法處理的事件方法。
| 特效名稱 |
說(shuō)明 |
| 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ì)話框插件為框架頁(yè)(iframe) 的方法
- Confirmer JQuery確認(rèn)對(duì)話框組件
- jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
- jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見使用問(wèn)題解答
- jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框
相關(guān)文章
一款接近完美的jquery浮動(dòng)層，會(huì)隨著滾動(dòng)條而自動(dòng)滾動(dòng)，始終維持在頁(yè)面的中間部分，利用浮動(dòng)層你可以制作一個(gè)QQ在線客服。2011-08-08
Jquery創(chuàng)建一個(gè)層當(dāng)鼠標(biāo)移動(dòng)到層上面不消失效果
使用Jquery創(chuàng)建一個(gè)層，實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到層上面不消失，示例代碼如下，感興趣的朋友可以參考下2013-12-12
關(guān)于JQuery自定義事件，不少同學(xué)曾發(fā)郵件問(wèn)我究竟日常JS應(yīng)用中會(huì)不會(huì)用到，以及具體例子云云。。。2010-08-08
jQuery數(shù)據(jù)類型小結(jié)(14個(gè))
jQuery除了包含原生JS中的內(nèi)置數(shù)據(jù)類型(built-in datatype)，還包括一些擴(kuò)展的數(shù)據(jù)類型(virtual types)，如Selectors、Events等，通過(guò)本文給大家分享14個(gè)jquery數(shù)據(jù)類型，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JQuery獲取各種寬度、高度(format函數(shù))實(shí)例
本例除了使用標(biāo)準(zhǔn)的JQuery類庫(kù)外，還添加了自定義的函數(shù)來(lái)進(jìn)行字符串的format操作。2013-03-03
從零學(xué)jquery之如何使用回調(diào)函數(shù)
回調(diào)函數(shù)指的是被調(diào)用者完成處理后自動(dòng)回調(diào)調(diào)用者預(yù)先傳遞的函數(shù)。2014-05-05
Javascript 使用ajax與C#獲取文件大小實(shí)例詳解
本文章向碼農(nóng)們介紹了js ajax獲取文件大小的實(shí)例,涉及JavaScript調(diào)用ajax交互及后臺(tái)C#文件操作的相關(guān)技巧,需要的朋友可以參考下2017-01-01
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁(yè)面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-06-06
這里獲得標(biāo)簽名為大寫，如:A , DIV，需要的朋友可以參考下2012-07-07
利用jQuery接受和處理xml數(shù)據(jù)的代碼(.net)
以下使用jQuery+Servlet接受和處理xml數(shù)據(jù)，模擬判斷用戶名是否存在2011-03-03