jQueryUI庫中dialog對話框功能如何使用

這篇“jQuery UI庫中dialog對話框功能如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jQuery UI庫中dialog對話框功能如何使用”文章吧。

創(chuàng)新互聯(lián)公司主要業(yè)務(wù)有網(wǎng)站營銷策劃、網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號開發(fā)、微信小程序、HTML5建站、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過程中，公司還積累了豐富的行業(yè)經(jīng)驗、成都全網(wǎng)營銷資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

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

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

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

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

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

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

dialog 外觀選項
屬性
 		默認值/類型
 		說明
 
title
 		無/字符串
 		對話框的標(biāo)題，可以直接設(shè)置在DOM 元素上
 
buttons
 		無/對象
 

以對象鍵值對方式，給dialog 添加按鈕。鍵是按鈕

的名稱，值是用戶點擊后調(diào)用的回調(diào)函數(shù)

$('#reg').dialog({ 
 
 title : '注冊', 
 
 buttons : { 
 
   '按鈕' : function () {} 
 
 } 
 
);
dialog 頁面位置選項
屬性
 		默認值/類型
 		說明
 
position
 		center/字符串
 

設(shè)置一個對話框窗口的坐標(biāo)位置，默認為center。

其他設(shè)置值為：left top、top right、bottom left、

right bottom（四個角）、top、bottom（頂部或底

部，寬度居中）、left 或right（左邊或右邊，高度

居中）、center（默認值）

$('#reg').dialog({ 
 
  position : 'left top' 
 
});
dialog 大小選項
屬性
 		默認值/類型
 		說明
 
width
 		300/數(shù)值
 		對話框的寬度。默認為300，單位是像素。
 
height 
 		auto/數(shù)值
 		對話框的高度。默認為auto，單位是像素。
 
minWidth 
 		150/數(shù)值
 		對話框的最小寬度。默認150，單位是像素。
 
minHeight 
 		150/數(shù)值
 		對話框的最小高度。默認150，單位是像素。
 
maxWidth 
 		auto/數(shù)值
 		對話框的最大寬度。默認auto，單位是像素。
 
maxHeight 
 		auto/數(shù)值
 		對話框的最大高度。默認auto，單位是像素。
$('#reg').dialog({ 
 
  height : 500, 
 
  width : 500, 
 
  minWidth : 300, 
 
  minHeight : 300, 
 
  maxWidth : 800, 
 
  maxHeight : 600 
 
});
dialog 視覺選項
屬性
 		默認值/類型
 		說明
 
show 
 		false/布爾值
 		顯示對話框時，默認采用淡入效果。
 
hide 
 		false 布爾值
 		關(guān)閉對話框時，默認采用淡出效果。
$('#reg').dialog({ 
 
  show : true, 
 
  hide : true 
 
});

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

show 和hide 可選特效
特效名稱
 		說明
 
blind 
 		對話框從頂部顯示或消失
 
bounce 
 		對話框斷斷續(xù)續(xù)地顯示或消失，垂直運動
 
clip 
 		對話框從中心垂直地顯示或消失
 
slide 
 		對話框從左邊顯示或消失
 
drop 
 		對話框從左邊顯示或消失，有透明度變化
 
fold 
 		對話框從左上角顯示或消失
 
highlight 
 		對話框顯示或消失，伴隨著透明度和背景色的變化
 
puff 
 		對話框從中心開始縮放。顯示時“收縮”，消失時“生長”
 
scale 
 		對話框從中心開始縮放。顯示時“生長”，消失時“收縮”
 
pulsate 
 		對話框以閃爍形式顯示或消失
$('#reg').dialog({ 
 
  show : 'blind', 
 
  hide : 'blind' 
 
});
dialog 行為選項
屬性
 		默認值/類型
 		說明
 
autoOpen 
 		true/布爾值
 

默認為true，調(diào)用dialog()方法時就會打開對話框；

如果為false，對話框不可見，但對話框已創(chuàng)建，可

以通過dialog('open')才能可見。

draggable 
 		true/布爾值
 		默認為true，可以移動對話框，false 無法移動。
 
resizable 
 		true/布爾值
 		默認為true，可以調(diào)整對話框大小，false 無法調(diào)整
 
modal 
 		false/布爾值
 

默認為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。

dialog 事件選項
事件名
 		說明
 
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('action', param)方法
方法
 		返回值
 		說明
 
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()方法處理的事件方法。

on()方法觸發(fā)的對話框事件
特效名稱
 		說明
 
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)閉'); 
 
});

以上就是關(guān)于“jQuery UI庫中dialog對話框功能如何使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：jQueryUI庫中dialog對話框功能如何使用
網(wǎng)頁路徑：http://muchs.cn/article38/jcpspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)站排名、動態(tài)網(wǎng)站、網(wǎng)站策劃、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司