對話框（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('關閉'); }); 新聞熱點
疑難解答
