<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # 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 名稱的元素被追加到 `&lt;body&gt;`。 ### 依賴 * [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> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看