溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“jQuery UI庫中dialog對話框功能如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jQuery UI庫中dialog對話框功能如何使用”文章吧。
對話框（dialog），是jQuery UI 非常重要的一個功能。它徹底的代替了JavaScript的alert()、prompt()等方法，也避免了新窗口或頁面的繁雜冗余。
一．開啟多個dialog
只要設置不同的id 即可實現。
$('#x').dialog();
$('#y').dialog();二．修改dialog 樣式
在彈出的dialog 對話框中，在火狐瀏覽器中打開Firebug 或者右擊->查看
元素。可以看看dialog 的樣式，對dialog 的標題背景進行修改。
//無須修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}三．dialog()方法的屬性
對話框方法有兩種形式：1.dialog(options)，options 是以對象鍵值對的形式
傳參，每個鍵值對表示一個選項；2.dialog('action', param)，action 是操作對
話框方法的字符串，param則是options 的某個選項。
| 屬性 | 默認值/類型 | 說明 |
| title | 無/字符串 | 對話框的標題，可以直接設置在DOM 元素上 |
| buttons | 無/對象 | 以對象鍵值對方式，給dialog 添加按鈕。鍵是按鈕 的名稱，值是用戶點擊后調用的回調函數 |
$('#reg').dialog({
title : '注冊',
buttons : {
'按鈕' : function () {}
}
);| 屬性 | 默認值/類型 | 說明 |
| position | center/字符串 | 設置一個對話框窗口的坐標位置，默認為center。 其他設置值為：left top、top right、bottom left、 right bottom（四個角）、top、bottom（頂部或底 部，寬度居中）、left 或right（左邊或右邊，高度 居中）、center（默認值） |
$('#reg').dialog({
position : 'left top'
});| 屬性 | 默認值/類型 | 說明 |
| width | 300/數值 | 對話框的寬度。默認為300，單位是像素。 |
| height | auto/數值 | 對話框的高度。默認為auto，單位是像素。 |
| minWidth | 150/數值 | 對話框的最小寬度。默認150，單位是像素。 |
| minHeight | 150/數值 | 對話框的最小高度。默認150，單位是像素。 |
| maxWidth | auto/數值 | 對話框的最大寬度。默認auto，單位是像素。 |
| maxHeight | auto/數值 | 對話框的最大高度。默認auto，單位是像素。 |
$('#reg').dialog({
height : 500,
width : 500,
minWidth : 300,
minHeight : 300,
maxWidth : 800,
maxHeight : 600
});| 屬性 | 默認值/類型 | 說明 |
| show | false/布爾值 | 顯示對話框時，默認采用淡入效果。 |
| hide | false 布爾值 | 關閉對話框時，默認采用淡出效果。 |
$('#reg').dialog({
show : true,
hide : true
});注意：設置true 后，默認為淡入淡出，如果想使用別的特效，可以使用以下表格中的字符串參數。
| 特效名稱 | 說明 |
| blind | 對話框從頂部顯示或消失 |
| bounce | 對話框斷斷續續地顯示或消失，垂直運動 |
| clip | 對話框從中心垂直地顯示或消失 |
| slide | 對話框從左邊顯示或消失 |
| drop | 對話框從左邊顯示或消失，有透明度變化 |
| fold | 對話框從左上角顯示或消失 |
| highlight | 對話框顯示或消失，伴隨著透明度和背景色的變化 |
| puff | 對話框從中心開始縮放。顯示時“收縮”，消失時“生長” |
| scale | 對話框從中心開始縮放。顯示時“生長”，消失時“收縮” |
| pulsate | 對話框以閃爍形式顯示或消失 |
$('#reg').dialog({
show : 'blind',
hide : 'blind'
});| 屬性 | 默認值/類型 | 說明 |
| autoOpen | true/布爾值 | 默認為true，調用dialog()方法時就會打開對話框； 如果為false，對話框不可見，但對話框已創建，可 以通過dialog('open')才能可見。 |
| draggable | true/布爾值 | 默認為true，可以移動對話框，false 無法移動。 |
| resizable | true/布爾值 | 默認為true，可以調整對話框大小，false 無法調整 |
| modal | false/布爾值 | 默認為false，對話框外可操作，true 對話框會遮罩 一層灰紗，無法操作。 |
| closeText | 無/字符串 | 設置關閉按鈕的title 文字 |
$('#reg').dialog({
autoOpen : false,
draggable : false,
resizable : false,
modal : true,
closeText : '關閉'
});四．dialog()方法的事件
除了屬性設置外，dialog()方法也提供了大量的事件。這些事件可以給各種不同狀態
時提供回調函數。這些回調函數中的this 值等于對話框內容的div 對象，不是整個對話框
的div。
| 事件名 | 說明 |
| focus | 當對話框被激活時（首次顯示以及每次在上面點擊）會 調用focus 方法，該方法有兩個參數(event, ui)。此事件中 的ui 參數為空。 |
| create | 當對話框被創建時會調用create 方法，該方法有兩個參 數(event, ui)。此事件中的ui 參數為空。 |
| open | 當對話框被顯示時（首次顯示或調用dialog('open')方法） 會調用open 方法，該方法有兩個參數(event, ui)。此事件 中的ui 參數為空。 |
| beforeClose | 當對話框將要關閉時（ 當單擊關閉按鈕或調用 dialog('close')方法），會調用beforeclose 方法。如果該函 數返回false，對話框將不會被關閉。關閉的對話框可以 用dialog('open')重新打開。該方法有兩個參數(event, ui)。 此事件中的ui 參數為空。 |
| close | 當對話框將要關閉時（ 當單擊關閉按鈕或調用 dialog('close')方法），會調用close 方法。關閉的對話框可 以用dialog('open')重新打開。該方法有兩個參數(event, ui)。此事件中的ui 參數為空。 |
| drag | 當對話框移動時，每次移動一點均會調用drag 方法。該 方法有兩個參數。該方法有兩個參數(event, ui)。此事件 中的ui 有兩個屬性對象： 1.position，得到當前移動的坐標，有兩個子屬性：top 和 left。 2.offset，得到當前移動的坐標，有兩個子屬性：top 和left。 |
| dragStart | 當開始移動對話框時，會調用dragStart 方法。該方法有 兩個參數(event, ui)。此事件中的ui 有兩個屬性對象： 1.position，得到當前移動的坐標，有兩個子屬性：top 和 left。 2.offset，得到當前移動的坐標，有兩個子屬性：top 和left。 |
| dragStop | 當開始移動對話框時，會調用dragStop 方法。該方法有 兩個參數(event, ui)。此事件中的ui 有兩個屬性對象： 1.position，得到當前移動的坐標，有兩個子屬性：top 和 left。 2.offset，得到當前移動的坐標，有兩個子屬性：top 和left。 |
| resize | 當對話框拉升大小的時候，每一次拖拉都會調用resize 方法。該方法有兩個參數(event, ui)。此事件中的ui 有四 個屬性對象： 1.size，得到對話框的大小，有兩個子屬性：width 和 height。 2.position，得到對話框的坐標，有兩個子屬性：top 和left。 3.originalSize，得到對話框原始的大小，有兩個子屬性： width 和height。 4.originalPosition，得到對話框原始的坐標，有兩個子屬 性：top 和left。 |
| resizeStart | 當開始拖拉對話框時，會調用resizeStart 方法。該方法有 兩個參數(event, ui)。此事件中的ui 有四個屬性對象： 1.size，得到對話框的大小，有兩個子屬性：width 和 height。 2.position，得到對話框的坐標，有兩個子屬性：top 和left。 3.originalSize，得到對話框原始的大小，有兩個子屬性： width 和height。 4.originalPosition，得到對話框原始的坐標，有兩個子屬 性：top 和left。 |
| resizeStop | 當結束拖拉對話框時，會調用resizeStart 方法。該方法有 兩個參數(event, ui)。此事件中的ui 有四個屬性對象： 1.size，得到對話框的大小，有兩個子屬性：width 和 height。 2.position，得到對話框的坐標，有兩個子屬性：top 和left。 3.originalSize，得到對話框原始的大小，有兩個子屬性： width 和height。 4.originalPosition，得到對話框原始的坐標，有兩個子屬 性：top 和left。 |
//當對話框獲得焦點后
$('#reg').dialog({
focus : function (e, ui) {
alert('獲得焦點');
}
});
//當創建對話框時
$('#reg').dialog({
create : function (e, ui) {
alert('創建對話框');
}
});
//當將要關閉時
$('#reg').dialog({
beforeClose : function (e, ui) {
alert('關閉前做的事！');
return flag;
}
});
//關閉對話框時
$('#reg').dialog({
close : function (e, ui) {
alert('關閉！');
}
});
//對話框移動時
$('#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);
}
});
//對話框結束移動時
$('#reg').dialog({
dragStop : function (e, ui) {
alert('top:' + ui.position.top + '\n'
+ 'left:' + ui.position.left);
}
});
//調整對話框大小時
$('#reg').dialog({
resize : function (e, ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
//開始調整對話框大小時
$('#reg').dialog({
resizeStart : function (e, ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});
//結束調整對話框大小時
$('#reg').dialog({
resizeStop : function (e, ui) {
alert('size:' + ui.size.width + '\n'
+ 'originalSize:' + ui.originalSize.width);
}
});| 方法 | 返回值 | 說明 |
| dialog('open') | jQuery 對象 | 打開對話框 |
| dialog('close') | jQuery 對象 | 關閉對話框 |
| dialog('destroy') | jQuery 對象 | 刪除對話框，直接阻斷了dialog |
| dialog('isOpen') | 布爾值 | 判斷對話框是否打開狀態 |
| dialog('widget') | jQuery 對象 | 獲取對話框的jQuery 對象 |
| dialog('option', param) | 一般值 | 獲取options 屬性的值 |
| dialog('option', param, value) | jQuery 對象 | 設置options 屬性的值 |
//初始隱藏對話框
$('#reg').dialog({
autoOpen : false
});
//打開對話框
$('#reg_a').click(function () {
$('#reg').dialog('open');
});
//關閉對話框
$('#reg').click(function () {
$('#reg').dialog('close');
});
//判斷對話框打開或關閉狀態
$(document).click(function () {
alert($('#reg').dialog('isOpen'));
});
//將指定對話框置前
$(document).click(function () {
$('#reg').dialog('moveToTop');
});
//獲取某個options 的param 選項的值
var title = $('#reg').dialog('option', 'title');
alert(title);
//設置某個options 的param 選項的值
$('#reg').dialog('option', 'title', '注冊');五．dialog 中使用on()
在dialog 的事件中，提供了使用on()方法處理的事件方法。
| 特效名稱 | 說明 |
| dialogfocus | 得到焦點時觸發 |
| dialogopen | 顯示時觸發 |
| dialogbeforeclose | 將要關閉時觸發 |
| dialogclose | 關閉時觸發 |
| dialogdrag | 每一次移動時觸發 |
| dialogdragstart | 開始移動時觸發 |
| dialogdragstop | 移動結束后觸發 |
| dialogresize | 每次調整大小時觸發 |
| dialogresizestart | 開始調整大小時觸發 |
| dialogresizestop | 結束調整大小時觸發 |
$('#reg').on('dialogclose', function () {
alert('關閉');
});以上就是關于“jQuery UI庫中dialog對話框功能如何使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
