快捷導(dǎo)航

jQuery UI庫(kù)中dialog對(duì)話(huà)框功能使用全解析

更新時(shí)間：2016年04月23日 11:45:45 作者：初心始終鈺

這篇文章主要介紹了jQuery UI庫(kù)中dialog對(duì)話(huà)框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下

對(duì)話(huà)框（dialog），是jQuery UI 非常重要的一個(gè)功能。它徹底的代替了JavaScript
的alert()、prompt()等方法，也避免了新窗口或頁(yè)面的繁雜冗余。

一．開(kāi)啟多個(gè)dialog
只要設(shè)置不同的id 即可實(shí)現(xiàn)。

$('#x').dialog(); 
$('#y').dialog();

二．修改dialog 樣式
在彈出的dialog 對(duì)話(huà)框中，在火狐瀏覽器中打開(kāi)Firebug 或者右擊->查看
元素?？梢钥纯磀ialog 的樣式，對(duì)dialog 的標(biāo)題背景進(jìn)行修改。

//無(wú)須修改ui 里的CSS，直接用style.css 替代掉 
.ui-widget-header { 
 
  background:url(../img/xxx.png); 
 
}

三．dialog()方法的屬性
對(duì)話(huà)框方法有兩種形式：1.dialog(options)，options 是以對(duì)象鍵值對(duì)的形式
傳參，每個(gè)鍵值對(duì)表示一個(gè)選項(xiàng)；2.dialog('action', param)，action 是操作對(duì)
話(huà)框方法的字符串，param則是options 的某個(gè)選項(xiàng)。

dialog 外觀選項(xiàng)
屬性	默認(rèn)值/類(lèi)型	說(shuō)明
title	無(wú)/字符串	對(duì)話(huà)框的標(biāo)題，可以直接設(shè)置在DOM 元素上
buttons	無(wú)/對(duì)象	以對(duì)象鍵值對(duì)方式，給dialog 添加按鈕。鍵是按鈕的名稱(chēng)，值是用戶(hù)點(diǎn)擊后調(diào)用的回調(diào)函數(shù)

$('#reg').dialog({ 
 
 title : '注冊(cè)', 
 
 buttons : { 
 
   '按鈕' : function () {} 
 
 } 
 
);

dialog 頁(yè)面位置選項(xiàng)
屬性	默認(rèn)值/類(lèi)型	說(shuō)明
position	center/字符串	設(shè)置一個(gè)對(duì)話(huà)框窗口的坐標(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' 
 
});

dialog 大小選項(xiàng)
屬性	默認(rèn)值/類(lèi)型	說(shuō)明
width	300/數(shù)值	對(duì)話(huà)框的寬度。默認(rèn)為300，單位是像素。
height	auto/數(shù)值	對(duì)話(huà)框的高度。默認(rèn)為auto，單位是像素。
minWidth	150/數(shù)值	對(duì)話(huà)框的最小寬度。默認(rèn)150，單位是像素。
minHeight	150/數(shù)值	對(duì)話(huà)框的最小高度。默認(rèn)150，單位是像素。
maxWidth	auto/數(shù)值	對(duì)話(huà)框的最大寬度。默認(rèn)auto，單位是像素。
maxHeight	auto/數(shù)值	對(duì)話(huà)框的最大高度。默認(rèn)auto，單位是像素。

$('#reg').dialog({ 
 
  height : 500, 
 
  width : 500, 
 
  minWidth : 300, 
 
  minHeight : 300, 
 
  maxWidth : 800, 
 
  maxHeight : 600 
 
});

dialog 視覺(jué)選項(xiàng)
屬性	默認(rèn)值/類(lèi)型	說(shuō)明
show	false/布爾值	顯示對(duì)話(huà)框時(shí)，默認(rèn)采用淡入效果。
hide	false 布爾值	關(guān)閉對(duì)話(huà)框時(shí)，默認(rèn)采用淡出效果。

$('#reg').dialog({ 
 
  show : true, 
 
  hide : true 
 
});

注意：設(shè)置true 后，默認(rèn)為淡入淡出，如果想使用別的特效，可以使用以下表格中的字符串參數(shù)。

show 和hide 可選特效
特效名稱(chēng)	說(shuō)明
blind	對(duì)話(huà)框從頂部顯示或消失
bounce	對(duì)話(huà)框斷斷續(xù)續(xù)地顯示或消失，垂直運(yùn)動(dòng)
clip	對(duì)話(huà)框從中心垂直地顯示或消失
slide	對(duì)話(huà)框從左邊顯示或消失
drop	對(duì)話(huà)框從左邊顯示或消失，有透明度變化
fold	對(duì)話(huà)框從左上角顯示或消失
highlight	對(duì)話(huà)框顯示或消失，伴隨著透明度和背景色的變化
puff	對(duì)話(huà)框從中心開(kāi)始縮放。顯示時(shí)“收縮”，消失時(shí)“生長(zhǎng)”
scale	對(duì)話(huà)框從中心開(kāi)始縮放。顯示時(shí)“生長(zhǎng)”，消失時(shí)“收縮”
pulsate	對(duì)話(huà)框以閃爍形式顯示或消失

$('#reg').dialog({ 
 
  show : 'blind', 
 
  hide : 'blind' 
 
});

dialog 行為選項(xiàng)
屬性	默認(rèn)值/類(lèi)型	說(shuō)明
autoOpen	true/布爾值	默認(rèn)為true，調(diào)用dialog()方法時(shí)就會(huì)打開(kāi)對(duì)話(huà)框；如果為false，對(duì)話(huà)框不可見(jiàn)，但對(duì)話(huà)框已創(chuàng)建，可以通過(guò)dialog('open')才能可見(jiàn)。
draggable	true/布爾值	默認(rèn)為true，可以移動(dòng)對(duì)話(huà)框，false 無(wú)法移動(dòng)。
resizable	true/布爾值	默認(rèn)為true，可以調(diào)整對(duì)話(huà)框大小，false 無(wú)法調(diào)整
modal	false/布爾值	默認(rèn)為false，對(duì)話(huà)框外可操作，true 對(duì)話(huà)框會(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ì)話(huà)框內(nèi)容的div 對(duì)象，不是整個(gè)對(duì)話(huà)框
的div。

dialog 事件選項(xiàng)
事件名	說(shuō)明
focus	當(dāng)對(duì)話(huà)框被激活時(shí)（首次顯示以及每次在上面點(diǎn)擊）會(huì) 調(diào)用focus 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
create	當(dāng)對(duì)話(huà)框被創(chuàng)建時(shí)會(huì)調(diào)用create 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
open	當(dāng)對(duì)話(huà)框被顯示時(shí)（首次顯示或調(diào)用dialog('open')方法）會(huì)調(diào)用open 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
beforeClose	當(dāng)對(duì)話(huà)框?qū)⒁P(guān)閉時(shí)（當(dāng)單擊關(guān)閉按鈕或調(diào)用 dialog('close')方法），會(huì)調(diào)用beforeclose 方法。如果該函數(shù)返回false，對(duì)話(huà)框?qū)⒉粫?huì)被關(guān)閉。關(guān)閉的對(duì)話(huà)框可以用dialog('open')重新打開(kāi)。該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
close	當(dāng)對(duì)話(huà)框?qū)⒁P(guān)閉時(shí)（當(dāng)單擊關(guān)閉按鈕或調(diào)用 dialog('close')方法），會(huì)調(diào)用close 方法。關(guān)閉的對(duì)話(huà)框可以用dialog('open')重新打開(kāi)。該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
drag	當(dāng)對(duì)話(huà)框移動(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)開(kāi)始移動(dòng)對(duì)話(huà)框時(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)開(kāi)始移動(dòng)對(duì)話(huà)框時(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ì)話(huà)框拉升大小的時(shí)候，每一次拖拉都會(huì)調(diào)用resize 方法。該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 有四個(gè)屬性對(duì)象： 1.size，得到對(duì)話(huà)框的大小，有兩個(gè)子屬性：width 和 height。 2.position，得到對(duì)話(huà)框的坐標(biāo)，有兩個(gè)子屬性：top 和left。 3.originalSize，得到對(duì)話(huà)框原始的大小，有兩個(gè)子屬性： width 和height。 4.originalPosition，得到對(duì)話(huà)框原始的坐標(biāo)，有兩個(gè)子屬性：top 和left。
resizeStart	當(dāng)開(kāi)始拖拉對(duì)話(huà)框時(shí)，會(huì)調(diào)用resizeStart 方法。該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 有四個(gè)屬性對(duì)象： 1.size，得到對(duì)話(huà)框的大小，有兩個(gè)子屬性：width 和 height。 2.position，得到對(duì)話(huà)框的坐標(biāo)，有兩個(gè)子屬性：top 和left。 3.originalSize，得到對(duì)話(huà)框原始的大小，有兩個(gè)子屬性： width 和height。 4.originalPosition，得到對(duì)話(huà)框原始的坐標(biāo)，有兩個(gè)子屬性：top 和left。
resizeStop	當(dāng)結(jié)束拖拉對(duì)話(huà)框時(shí)，會(huì)調(diào)用resizeStart 方法。該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 有四個(gè)屬性對(duì)象： 1.size，得到對(duì)話(huà)框的大小，有兩個(gè)子屬性：width 和 height。 2.position，得到對(duì)話(huà)框的坐標(biāo)，有兩個(gè)子屬性：top 和left。 3.originalSize，得到對(duì)話(huà)框原始的大小，有兩個(gè)子屬性： width 和height。 4.originalPosition，得到對(duì)話(huà)框原始的坐標(biāo)，有兩個(gè)子屬性：top 和left。

//當(dāng)對(duì)話(huà)框獲得焦點(diǎn)后 
$('#reg').dialog({ 
 
  focus : function (e, ui) { 
 
   alert('獲得焦點(diǎn)'); 
 
  } 
 
}); 
 
//當(dāng)創(chuàng)建對(duì)話(huà)框時(shí) 
$('#reg').dialog({ 
 
  create : function (e, ui) { 
 
   alert('創(chuàng)建對(duì)話(huà)框'); 
 
  } 
 
}); 
 
//當(dāng)將要關(guān)閉時(shí) 
$('#reg').dialog({ 
 
  beforeClose : function (e, ui) { 
 
   alert('關(guān)閉前做的事！'); 
 
   return flag; 
 
  } 
 
}); 
 
//關(guān)閉對(duì)話(huà)框時(shí) 
$('#reg').dialog({ 
 
  close : function (e, ui) { 
 
   alert('關(guān)閉！'); 
 
  } 
 
}); 
 
//對(duì)話(huà)框移動(dòng)時(shí) 
$('#reg').dialog({ 
 
  drag : function (e, ui) { 
 
   alert('top:' + ui.position.top + '\n' 
 
        + 'left:' + ui.position.left); 
 
  } 
 
}); 
 
//對(duì)話(huà)框開(kāi)始移動(dòng)時(shí) 
$('#reg').dialog({ 
 
  dragStart : function (e, ui) { 
 
   alert('top:' + ui.position.top + '\n' 
 
        + 'left:' + ui.position.left); 
 
  } 
 
}); 
 
//對(duì)話(huà)框結(jié)束移動(dòng)時(shí) 
$('#reg').dialog({ 
 
  dragStop : function (e, ui) { 
 
   alert('top:' + ui.position.top + '\n' 
 
        + 'left:' + ui.position.left); 
 
  } 
 
}); 
 
//調(diào)整對(duì)話(huà)框大小時(shí) 
$('#reg').dialog({ 
 
  resize : function (e, ui) { 
 
   alert('size:' + ui.size.width + '\n' 
 
        + 'originalSize:' + ui.originalSize.width); 
 
  } 
 
}); 
 
//開(kāi)始調(diào)整對(duì)話(huà)框大小時(shí) 
$('#reg').dialog({ 
 
  resizeStart : function (e, ui) { 
 
   alert('size:' + ui.size.width + '\n' 
 
        + 'originalSize:' + ui.originalSize.width); 
 
  } 
 
}); 
 
//結(jié)束調(diào)整對(duì)話(huà)框大小時(shí) 
$('#reg').dialog({ 
 
  resizeStop : function (e, ui) { 
 
   alert('size:' + ui.size.width + '\n' 
 
        + 'originalSize:' + ui.originalSize.width); 
 
  } 
 
});

dialog('action', param)方法
方法	返回值	說(shuō)明
dialog('open')	jQuery 對(duì)象	打開(kāi)對(duì)話(huà)框
dialog('close')	jQuery 對(duì)象	關(guān)閉對(duì)話(huà)框
dialog('destroy')	jQuery 對(duì)象	刪除對(duì)話(huà)框，直接阻斷了dialog
dialog('isOpen')	布爾值	判斷對(duì)話(huà)框是否打開(kāi)狀態(tài)
dialog('widget')	jQuery 對(duì)象	獲取對(duì)話(huà)框的jQuery 對(duì)象
dialog('option', param)	一般值	獲取options 屬性的值
dialog('option', param, value)	jQuery 對(duì)象	設(shè)置options 屬性的值

//初始隱藏對(duì)話(huà)框 
$('#reg').dialog({ 
 
  autoOpen : false 
 
}); 
 
//打開(kāi)對(duì)話(huà)框 
$('#reg_a').click(function () { 
 
  $('#reg').dialog('open'); 
 
}); 
 
//關(guān)閉對(duì)話(huà)框 
$('#reg').click(function () { 
 
  $('#reg').dialog('close'); 
 
}); 
 
//判斷對(duì)話(huà)框打開(kāi)或關(guān)閉狀態(tài) 
$(document).click(function () { 
 
  alert($('#reg').dialog('isOpen')); 
 
}); 
 
//將指定對(duì)話(huà)框置前 
$(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()方法處理的事件方法。

on()方法觸發(fā)的對(duì)話(huà)框事件
特效名稱(chēng)	說(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	開(kāi)始移動(dòng)時(shí)觸發(fā)
dialogdragstop	移動(dòng)結(jié)束后觸發(fā)
dialogresize	每次調(diào)整大小時(shí)觸發(fā)
dialogresizestart	開(kāi)始調(diào)整大小時(shí)觸發(fā)
dialogresizestop	結(jié)束調(diào)整大小時(shí)觸發(fā)

$('#reg').on('dialogclose', function () { 
 
  alert('關(guān)閉'); 
 
});

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

jQuery UI庫(kù)中dialog對(duì)話(huà)框功能使用全解析

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具