Dialog Widget · jQuery UI API 中文文檔 1.10

# Dialog Widget Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets") ## version added: 1.0 **Description:** 在一個交互覆蓋層中打開內容。 ## QuickNav[Examples](#entry-examples) ### Options + [appendTo](#option-appendTo) + [autoOpen](#option-autoOpen) + [buttons](#option-buttons) + [closeOnEscape](#option-closeOnEscape) + [closeText](#option-closeText) + [dialogClass](#option-dialogClass) + [draggable](#option-draggable) + [height](#option-height) + [hide](#option-hide) + [maxHeight](#option-maxHeight) + [maxWidth](#option-maxWidth) + [minHeight](#option-minHeight) + [minWidth](#option-minWidth) + [modal](#option-modal) + [position](#option-position) + [resizable](#option-resizable) + [show](#option-show) + [title](#option-title) + [width](#option-width) ### Methods + [close](#method-close) + [destroy](#method-destroy) + [isOpen](#method-isOpen) + [moveToTop](#method-moveToTop) + [open](#method-open) + [option](#method-option) + [widget](#method-widget) ### Extension Points + [_allowInteraction](#method-_allowInteraction) ### Events + [beforeClose](#event-beforeClose) + [close](#event-close) + [create](#event-create) + [drag](#event-drag) + [dragStart](#event-dragStart) + [dragStop](#event-dragStop) + [focus](#event-focus) + [open](#event-open) + [resize](#event-resize) + [resizeStart](#event-resizeStart) + [resizeStop](#event-resizeStop) 對話框是一個懸浮窗口，包括一個標題欄和一個內容區域。對話框窗口可以移動，重新調整大小，默認情況下通過 'x' 圖標關閉。如果內容長度超過最大高度，一個滾動條會自動出現。一個底部按鈕欄和一個半透明的模式覆蓋層是常見的添加選項。 ### 焦點當打開一個對話框時，焦點會自動移動到滿足下面條件的第一個項目： 1. 帶有 `autofocus` 屬性的對話框內的第一個元素 2. 對話框內容內的第一個 [`:tabbable`](/tabbable-selector/) 元素 3. 對話框按鈕面板內的第一個 [`:tabbable`](/tabbable-selector/) 元素 4. 對話框的關閉按鈕 5. 對話框本身當打開時，對話框部件（Dialog Widget）確保通過 tab 切換對話框內元素間的焦點，不包括對話框外的元素。模態對話框防止鼠標用戶點擊對話框外的元素。當關閉對話框時，焦點自動返回到之前對話框打開時獲得焦點的元素上。 ### 隱藏關閉按鈕在一些情況下，您可能想要隱藏關閉按鈕，例如，在按鈕面板中已經有一個關閉按鈕的情況。最好的解決方法是通過 CSS。作為實例，您可以定義一個簡單的規則，比如： ``` .no-close .ui-dialog-titlebar-close { display: none; } ``` 然后，您可以添加 `no-close` class 到任意的對話框，用來隱藏關閉按鈕： ``` $( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [ { text: "OK", click: function() { $( this ).dialog( "close" ); } } ] }); ``` ### 主題對話框部件（Dialog Widget）使用 [jQuery UI CSS 框架](/theming/css-framework/) 來定義它的外觀和感觀的樣式。如果需要使用對話框指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-dialog`：對話框的外層容器。 * `ui-dialog-titlebar`：包含對話框標題和關閉按鈕的標題欄。 * `ui-dialog-title`：對話框文本標題周圍的容器。 * `ui-dialog-titlebar-close`：對話框的關閉按鈕。 * `ui-dialog-content`：對話框內容周圍的容器。這也是部件被實例化的元素。 * `ui-dialog-buttonpane`：包含對話按鈕的面板。只有當設置了 [`buttons`](#option-buttons) 選項時才呈現。 * `ui-dialog-buttonset`：按鈕周圍的容器。此外，當設置了 [`modal`](#option-modal) 選項時，一個帶有 `ui-widget-overlay` class 名稱的元素被追加到 `<body>`。 ### 依賴 * [UI 核心（UI Core）](/category/ui-core/) * [部件庫（Widget Factory）](/jQuery.widget/) * [定位（Position）](/position/) * [按鈕部件（Button Widget）](/button/) * [可拖拽小部件（Draggable Widget）](/draggable/) （可選的；當與 [`draggable`](#option-draggable) 選項一起使用時） * [可調整尺寸小部件（Resizable Widget）](/resizable/) （可選的；當與 [`resizable`](#option-resizable) 選項一起使用時） * [特效核心（Effects Core）](/category/effects-core/)（可選的；當與 [`show`](#option-show) 和 [`hide`](#option-hide) 選項一起使用時） ### 其他注意事項： * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## Options ### appendTo**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `"body"` dialog（和遮罩層，如果[modal](#option-modal)存在）應該被追加到哪個元素。 **注意:**當dialog處于打開狀態的時候`appendTo`選項不應該被改變。(version added: 1.10.0)**Code examples:** 初始化帶有指定 `appendTo`選項的 dialog： ``` $( ".selector" ).dialog({ appendTo: "#someElem" }); ``` 在初始化后，獲取或設置`appendTo` 選項： ``` // getter var appendTo = $( ".selector" ).dialog( "option", "appendTo" ); // setter $( ".selector" ).dialog( "option", "appendTo", "#someElem" ); ``` ### autoOpen**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `true`當設置為 `true` 時， dialog 會在初始化時自動打開. 如果為 `false` dialog 將會繼續隱藏直到調用[`open()`](#method-open)方法。**Code examples:** 初始化帶有指定 `autoOpen`選項的 dialog： ``` $( ".selector" ).dialog({ autoOpen: false }); ``` 在初始化后，獲取或設置`autoOpen` 選項： ``` // getter var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" ); // setter $( ".selector" ).dialog( "option", "autoOpen", false ); ``` ### buttons**Type:** [Object](http://api.jquery.com/Types/#Object) or [Array](http://api.jquery.com/Types/#Array) **Default:** `{}`指定哪些按鈕應該在dialog上顯示。回調的上下文是dialog元素（愚人碼頭注：`this`指向）; 如果你需要訪問按鈕，可以利用事件對象的目標元素。**支持多個類型：** * **Object**: 鍵是按鈕標簽，值是點擊相關按鈕時執行的回調函數。 * **Array**: 該數組的每個元素必須是一個定義特性，屬性，和按鈕上設置的事件處理程序的對象。 **Code examples:** 初始化帶有指定 `buttons`選項的 dialog： ``` $( ".selector" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }); ``` 在初始化后，獲取或設置`buttons` 選項： ``` // getter var buttons = $( ".selector" ).dialog( "option", "buttons" ); // setter $( ".selector" ).dialog( "option", "buttons", [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] ); ``` ### closeOnEscape**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `true`指定具有焦點的dialog，在用戶按下退出（ESC）鍵時，是否應該關閉。**Code examples:** 初始化帶有指定 `closeOnEscape`選項的 dialog： ``` $( ".selector" ).dialog({ closeOnEscape: false }); ``` 在初始化后，獲取或設置`closeOnEscape` 選項： ``` // getter var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" ); // setter $( ".selector" ).dialog( "option", "closeOnEscape", false ); ``` ### closeText**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"close"`指定關閉按鈕的文本。注意，關閉文本在使用標準的主題時，是隱藏的（visibly：hidden）。**Code examples:** 初始化帶有指定 `closeText`選項的 dialog： ``` $( ".selector" ).dialog({ closeText: "hide" }); ``` 在初始化后，獲取或設置`closeText` 選項： ``` // getter var closeText = $( ".selector" ).dialog( "option", "closeText" ); // setter $( ".selector" ).dialog( "option", "closeText", "hide" ); ``` ### dialogClass**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `""`在使用額外附加的主題時，指定dialog的類名稱，這些樣式添加到dialog上。**Code examples:** 初始化帶有指定 `dialogClass`選項的 dialog： ``` $( ".selector" ).dialog({ dialogClass: "alert" }); ``` 在初始化后，獲取或設置`dialogClass` 選項： ``` // getter var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" ); // setter $( ".selector" ).dialog( "option", "dialogClass", "alert" ); ``` ### draggable**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `true`如果設置為`true`, dialog將可以使用標題欄實現拖動。需要包含 [jQuery UI Draggable 部件](/draggable/)。**Code examples:** 初始化帶有指定 `draggable`選項的 dialog： ``` $( ".selector" ).dialog({ draggable: false }); ``` 在初始化后，獲取或設置`draggable` 選項： ``` // getter var draggable = $( ".selector" ).dialog( "option", "draggable" ); // setter $( ".selector" ).dialog( "option", "draggable", false ); ``` ### height**Type:** [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) **Default:** `"auto"`設置對話框的高度（單位：像素）。**支持多個類型：** * **Number**: 高度，單位：像素。 * **String**: 唯一支持的字符串值為`"auto"`，這將使對話框高度根據其內容進行自動調整。 **Code examples:** 初始化帶有指定 `height`選項的 dialog： ``` $( ".selector" ).dialog({ height: 400 }); ``` 在初始化后，獲取或設置`height` 選項： ``` // getter var height = $( ".selector" ).dialog( "option", "height" ); // setter $( ".selector" ).dialog( "option", "height", 400 ); ``` ### hide**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object) **Default:** `null`dialog關閉（隱藏）時的動畫效果。**支持多個類型：** * **Boolean**: 當設置為`false`，將不使用動畫效果，該dialog會立即被隱藏。如果設置為`true`，該dialog將會以默認的持續時間和默認的效果淡出。 * **Number**: 該dialog將以指定的時間和默認的效果淡出。 * **String**: 該dialog將使用指定的效果被隱藏。該值可以是一個jQuery內置的動畫方法的名稱，如`"slideUp"`，或一個 [jQuery UI 效果](/category/effects/)的名稱，如`"fold"`。在這兩種情況下，將使用默認持續時間和默認的動畫效果。 * **Object**: 如果該值是一個對象，那么 `effect`, `delay`, `duration`, 和`easing`可能要提供。 ?如果 `effect` 屬性包含一個jQuery方法的名稱，那么該方法將被使用; 否則它被假定為是一個jQuery UI的效果的名稱。當使用jQuery UI 支持額外設置的效果，你可以在對象中包含那些設置并且它們將被傳遞到的效果。如果`duration`持續時間或`easing`屬性被省略，那么默認值將被使用。如果`effect`被省略，那么`"fadeOut"` 將被使用。如果`delay`被省略，那么將不使用延遲。 **Code examples:** 初始化帶有指定 `hide`選項的 dialog： ``` $( ".selector" ).dialog({ hide: { effect: "explode", duration: 1000 } }); ``` 在初始化后，獲取或設置`hide` 選項： ``` // getter var hide = $( ".selector" ).dialog( "option", "hide" ); // setter $( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } ); ``` ### maxHeight**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `false`dialog可以調整的最大高度，以像素為單位。**Code examples:** 初始化帶有指定 `maxHeight`選項的 dialog： ``` $( ".selector" ).dialog({ maxHeight: 600 }); ``` 在初始化后，獲取或設置`maxHeight` 選項： ``` // getter var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" ); // setter $( ".selector" ).dialog( "option", "maxHeight", 600 ); ``` ### maxWidth**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `false`dialog可以調整的最大寬度，以像素為單位。**Code examples:** 初始化帶有指定 `maxWidth`選項的 dialog： ``` $( ".selector" ).dialog({ maxWidth: 600 }); ``` 在初始化后，獲取或設置`maxWidth` 選項： ``` // getter var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" ); // setter $( ".selector" ).dialog( "option", "maxWidth", 600 ); ``` ### minHeight**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `150`dialog可以調整的最小高度，以像素為單位。**Code examples:** 初始化帶有指定 `minHeight`選項的 dialog： ``` $( ".selector" ).dialog({ minHeight: 200 }); ``` 在初始化后，獲取或設置`minHeight` 選項： ``` // getter var minHeight = $( ".selector" ).dialog( "option", "minHeight" ); // setter $( ".selector" ).dialog( "option", "minHeight", 200 ); ``` ### minWidth**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `150`dialog可以調整的最小寬度，以像素為單位。**Code examples:** 初始化帶有指定 `minWidth`選項的 dialog： ``` $( ".selector" ).dialog({ minWidth: 200 }); ``` 在初始化后，獲取或設置`minWidth` 選項： ``` // getter var minWidth = $( ".selector" ).dialog( "option", "minWidth" ); // setter $( ".selector" ).dialog( "option", "minWidth", 200 ); ``` ### modal**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果設置為`true`，該dialog將會有遮罩層; 頁面上的其他項目將被禁用，即，不能交互。遮罩層創建對話框下方，但高于其它頁面元素。**Code examples:** 初始化帶有指定 `modal`選項的 dialog： ``` $( ".selector" ).dialog({ modal: true }); ``` 在初始化后，獲取或設置`modal` 選項： ``` // getter var modal = $( ".selector" ).dialog( "option", "modal" ); // setter $( ".selector" ).dialog( "option", "modal", true ); ``` ### position**Type:** [Object](http://api.jquery.com/Types/#Object) or [String](http://api.jquery.com/Types/#String) or [Array](http://api.jquery.com/Types/#Array) **Default:** `{ my: "center", at: "center", of: window }` 指定dialog顯示的位置。該dialog將會處理沖突 ?，使得盡可能多的dialog盡可能地可見。 _注意: 不贊成使用 `String` 和 `Array` 格式。_ **支持多個類型：** * **Object**: 確定dialog打開時的位置。 ?`of`選項默認為窗口，但您可以指定其他元素定位。你可以參考[jQuery UI Position](/position/)實用工具，了解各種選項的更多細節。 * **String**:一個字符串，表示可視區內的位置。可能的值：`"center"`, `"left"`, `"right"`, `"top"`, `"bottom"`. * **Array**: 一個包含相對于可見區域左上角_x, y_偏移坐標（單位為像素）的數組，或一個可能值的字符串名稱。 **Code examples:** 初始化帶有指定 `position`選項的 dialog： ``` $( ".selector" ).dialog({ position: { my: "left top", at: "left bottom", of: button } }); ``` 在初始化后，獲取或設置`position` 選項： ``` // getter var position = $( ".selector" ).dialog( "option", "position" ); // setter $( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } ); ``` ### resizable**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `true`如果設置為`true`，那么dialog允許調整大小。需要包含[jQuery UI Resizable widget](/resizable/)。**Code examples:** 初始化帶有指定 `resizable`選項的 dialog： ``` $( ".selector" ).dialog({ resizable: false }); ``` 在初始化后，獲取或設置`resizable` 選項： ``` // getter var resizable = $( ".selector" ).dialog( "option", "resizable" ); // setter $( ".selector" ).dialog( "option", "resizable", false ); ``` ### show**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object) **Default:** `null`dialog打開（顯示）時的動畫效果。**支持多個類型：** * **Boolean**: 當設置為`false`，將不使用動畫效果，該dialog會立即被隱藏。如果設置為`true`，該dialog將會以默認的持續時間和默認的效果淡出。 * **Number**: 該dialog將以指定的時間和默認的效果淡出。 * **String**: 該dialog將使用指定的效果被隱藏。該值可以是一個jQuery內置的動畫方法的名稱，如`"slideUp"`，或一個 [jQuery UI 效果](/category/effects/)的名稱，如`"fold"`。在這兩種情況下，將使用默認持續時間和默認的動畫效果。 * **Object**: 如果該值是一個對象，那么 `effect`, `delay`, `duration`, 和`easing`可能要提供。 ?如果 `effect` 屬性包含一個jQuery方法的名稱，那么該方法將被使用; 否則它被假定為是一個jQuery UI的效果的名稱。當使用jQuery UI 支持額外設置的效果，你可以在對象中包含那些設置并且它們將被傳遞到的效果。如果`duration`持續時間或`easing`屬性被省略，那么默認值將被使用。如果`effect`被省略，那么`"fadeOut"` 將被使用。如果`delay`被省略，那么將不使用延遲。 **Code examples:** 初始化帶有指定 `show`選項的 dialog： ``` $( ".selector" ).dialog({ show: { effect: "blind", duration: 800 } }); ``` 在初始化后，獲取或設置`show` 選項： ``` // getter var show = $( ".selector" ).dialog( "option", "show" ); // setter $( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } ); ``` ### title**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `null`指定dialog的標題文字。如果值為`null`,那么該dialog 元素上的`title`屬性將被使用。**Code examples:** 初始化帶有指定 `title`選項的 dialog： ``` $( ".selector" ).dialog({ title: "Dialog Title" }); ``` 在初始化后，獲取或設置`title` 選項： ``` // getter var title = $( ".selector" ).dialog( "option", "title" ); // setter $( ".selector" ).dialog( "option", "title", "Dialog Title" ); ``` ### width**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `300`設置dialog的寬度（單位：像素）。**Code examples:** 初始化帶有指定 `width`選項的 dialog： ``` $( ".selector" ).dialog({ width: 500 }); ``` 在初始化后，獲取或設置`width` 選項： ``` // getter var width = $( ".selector" ).dialog( "option", "width" ); // setter $( ".selector" ).dialog( "option", "width", 500 ); ``` ## Methods ### close()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 關閉dialog. * 該方法不接受任何參數。 **Code examples:** 調用 close 方法： ``` $( ".selector" ).dialog( "close" ); ``` ### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 完全移除 dialog 功能. 這將使元素返回到之前的初始化狀態. * 該方法不接受任何參數。 **Code examples:** 調用 destroy 方法： ``` $( ".selector" ).dialog( "destroy" ); ``` ### isOpen()Returns: [Boolean](http://api.jquery.com/Types/#Boolean) 確定 dialog 當前是否打開狀態。 * 該方法不接受任何參數。 **Code examples:** 調用 isOpen 方法： ``` var isOpen = $( ".selector" ).dialog( "isOpen" ); ``` ### moveToTop()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 移動dialog到所有dialog堆棧的頂部。（愚人碼頭注：理解為 z-index層級最高） * 該方法不接受任何參數。 **Code examples:** 調用 moveToTop 方法： ``` $( ".selector" ).dialog( "moveToTop" ); ``` ### open()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 打開 dialog。 * 該方法不接受任何參數。 **Code examples:** 調用 open 方法： ``` $( ".selector" ).dialog( "open" ); ``` ### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object) 獲取當前與指定的 `optionName` 關聯的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取值的選項的名稱。 **Code examples:** 調用該方法： ``` var isDisabled = $( ".selector" ).dialog( "option", "disabled" ); ``` ### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject) 獲取一個包含鍵/值對的對象，鍵/值對表示當前 dialog 選項哈希。 * 該方法不接受任何參數。 **Code examples:** 調用該方法： ``` var options = $( ".selector" ).dialog( "option" ); ``` ### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 設置與指定的 `optionName` 關聯的 dialog 選項的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置的選項的名稱。 * **value**Type: [Object](http://api.jquery.com/Types/#Object)要為選項設置的值。 **Code examples:** 調用該方法： ``` $( ".selector" ).dialog( "option", "disabled", true ); ``` ### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 為 dialog 設置一個或多個選項。 * **options**Type: [Object](http://api.jquery.com/Types/#Object)要設置的 option-value 對。 **Code examples:** 調用該方法： ``` $( ".selector" ).dialog( "option", { disabled: true } ); ``` ### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) 返回一個包含生成包裹元素的 `jQuery` 對象。 * 該方法不接受任何參數。 **Code examples:** 調用 widget 方法： ``` var widget = $( ".selector" ).dialog( "widget" ); ``` ## 擴展點（Extension Points） dialog小部件是[widget factory](http://www.css88.com/jquery-ui-api/jQuery.widget/)構建的，并且可以擴展。當擴展部件時，你必須覆蓋或添加新的行為到現有的方法。下列方法被提供作為擴展點用相同的API穩定性如上所列的[plugin methods](#methods)。有關小部件擴展的更多信息，請參閱[使用Widget Factory 擴展小部件](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/)。 ### _allowInteraction( event )Returns: [Boolean](http://api.jquery.com/Types/#Boolean) 帶遮罩的對話框不允許用戶與對話框下面元素進行交互。這可能會對不屬于該dialog的子元素那些絕對定位的其他元素產生問題。 `_allowInteraction()`方法確定用戶是否應被允許與給定的目標元素進行交互; 因此，它可用于不屬于該dialog的子元素白名單中的元素但你希望用戶能夠使用。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) **Code examples:** 允許Select2插件在遮罩對話框中使用。 [`_super()`](/jquery.widget/#method-_super)調用確保該對話框中的元素仍然可以交互。 ``` _allowInteraction: function( event ) { return !!$( event.target ).is( ".select2-input" ) || this._super( event ); } ``` ## Events ### beforeClose( event, ui )Type: `dialogbeforeclose` 當dialog即將關閉時觸發。如果取消，dialog將不會關閉。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意：`ui` 對象是空的，這里包含它是為了與其他事件保持一致性。_ **Code examples:** 初始化帶有指定 beforeClose 回調的 dialog： ``` $( ".selector" ).dialog({ beforeClose: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogbeforeclose 事件： ``` $( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} ); ``` ### close( event, ui )Type: `dialogclose` 當dialog關閉時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意：`ui` 對象是空的，這里包含它是為了與其他事件保持一致性。_ **Code examples:** 初始化帶有指定 close 回調的 dialog： ``` $( ".selector" ).dialog({ close: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogclose 事件： ``` $( ".selector" ).on( "dialogclose", function( event, ui ) {} ); ``` ### create( event, ui )Type: `dialogcreate` 在創建dialog時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意：`ui` 對象是空的，這里包含它是為了與其他事件保持一致性。_ **Code examples:** 初始化帶有指定 create 回調的 dialog： ``` $( ".selector" ).dialog({ create: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogcreate 事件： ``` $( ".selector" ).on( "dialogcreate", function( event, ui ) {} ); ``` ### drag( event, ui )Type: `dialogdrag` 在dialog正在被拖動時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **position**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的CSS position（位置）對象。 * **offset**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的offset position（偏移位置）對象。 **Code examples:** 初始化帶有指定 drag 回調的 dialog： ``` $( ".selector" ).dialog({ drag: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogdrag 事件： ``` $( ".selector" ).on( "dialogdrag", function( event, ui ) {} ); ``` ### dragStart( event, ui )Type: `dialogdragstart` 當用戶開始拖動dialog時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **position**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的CSS position（位置）對象。 * **offset**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的offset position（偏移位置）對象。 **Code examples:** 初始化帶有指定 dragStart 回調的 dialog： ``` $( ".selector" ).dialog({ dragStart: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogdragstart 事件： ``` $( ".selector" ).on( "dialogdragstart", function( event, ui ) {} ); ``` ### dragStop( event, ui )Type: `dialogdragstop` 當dialog 停止拖動時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **position**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的CSS position（位置）對象。 * **offset**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的offset position（偏移位置）對象。 **Code examples:** 初始化帶有指定 dragStop 回調的 dialog： ``` $( ".selector" ).dialog({ dragStop: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogdragstop 事件： ``` $( ".selector" ).on( "dialogdragstop", function( event, ui ) {} ); ``` ### focus( event, ui )Type: `dialogfocus` 當對話框獲取焦點時觸發此事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意：`ui` 對象是空的，這里包含它是為了與其他事件保持一致性。_ **Code examples:** 初始化帶有指定 focus 回調的 dialog： ``` $( ".selector" ).dialog({ focus: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogfocus 事件： ``` $( ".selector" ).on( "dialogfocus", function( event, ui ) {} ); ``` ### open( event, ui )Type: `dialogopen` 當對話框打開后，觸發此事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意：`ui` 對象是空的，這里包含它是為了與其他事件保持一致性。_ **Code examples:** 初始化帶有指定 open 回調的 dialog： ``` $( ".selector" ).dialog({ open: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogopen 事件： ``` $( ".selector" ).on( "dialogopen", function( event, ui ) {} ); ``` ### resize( event, ui )Type: `dialogresize` 當對話框大小改變時，觸發此事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小之前的CSS position（位置）對象。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的CSS position（位置）對象。 * **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小之前的size（尺寸）對象。 * **size**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的size（尺寸）對象。 **Code examples:** 初始化帶有指定 resize 回調的 dialog： ``` $( ".selector" ).dialog({ resize: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogresize 事件： ``` $( ".selector" ).on( "dialogresize", function( event, ui ) {} ); ``` ### resizeStart( event, ui )Type: `dialogresizestart` 當開始改變對話框大小時，觸發此事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小之前的CSS position（位置）對象。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的CSS position（位置）對象。 * **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小之前的size（尺寸）對象。 * **size**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的size（尺寸）對象。 **Code examples:** 初始化帶有指定 resizeStart 回調的 dialog： ``` $( ".selector" ).dialog({ resizeStart: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogresizestart 事件： ``` $( ".selector" ).on( "dialogresizestart", function( event, ui ) {} ); ``` ### resizeStop( event, ui )Type: `dialogresizestop` 當對話框改變大小后，觸發此事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小之前的CSS position（位置）對象。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的CSS position（位置）對象。 * **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小之前的size（尺寸）對象。 * **size**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的size（尺寸）對象。 **Code examples:** 初始化帶有指定 resizeStop 回調的 dialog： ``` $( ".selector" ).dialog({ resizeStop: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 dialogresizestop 事件： ``` $( ".selector" ).on( "dialogresizestop", function( event, ui ) {} ); ``` ## Example: #### 一個簡單的 jQuery UI 對話框（Dialog）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>dialog demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <button id="opener">open the dialog</button> <div id="dialog" title="Dialog Title">I'm a dialog</div> <script> $( "#dialog" ).dialog({ autoOpen: false }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); </script> </body> </html> ```