JqueryUI - 对话框

对话框是在 HTML 页面上呈现信息的好方法之一。对话框是一个带有标题和内容区域的浮动窗口。该窗口可以移动、调整大小，当然，默认情况下也可以使用“X”图标关闭。

jQueryUI 提供了dialog()方法，该方法将页面上编写的HTML 代码转换为HTML 代码以显示对话框。

句法

dialog ()方法可以以两种形式使用 -

$(选择器,上下文).dialog(选项)方法

对话框（选项）方法声明可以以对话框的形式管理 HTML 元素。options参数是一个指定该窗口的外观和Behave的对象。

句法

$(selector, context).dialog(options);

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

$(selector, context).dialog({option1: value1, option2: value2..... });

下表列出了可以与此方法一起使用的不同选项-

先生。 选项和说明
1 附加到

如果此选项设置为false，它将阻止ui-draggable类添加到所选 DOM 元素列表中。默认情况下它的值为true。

选项 - 追加到

该选项用于将对话框附加到指定的元素。默认情况下它的值为"body"。

句法

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2 自动打开

除非将此选项设置为false，否则该对话框将在创建时打开。当false时，将在调用dialog('open') 时打开对话框。默认情况下它的值为true。

选项 - 自动打开

除非将此选项设置为false，否则该对话框将在创建时打开。当false时，将在调用dialog('open') 时打开对话框。默认情况下它的值为true。

句法

$(".selector").dialog(
   { autoOpen: false }
);
3 纽扣

此选项在对话框中添加按钮。它们被列为对象，每个属性都是按钮上的文本。该值是用户单击按钮时调用的回调函数。默认情况下，其值为{}。

选项 - 按钮

This option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}.

This handler is invoked with a function context of the dialog box element, and is passed the event instance with the button set as the target property. If omitted, no buttons are created for the dialog box.

Syntax

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
4 密室逃脱

除非此选项设置为false，否则当用户在对话框具有焦点时按 Escape 键时，对话框将关闭。默认情况下它的值为true。

Option - closeOnEscape

Unless this option set to false, the dialog box will be closed when the user presses the Escape key while the dialog box has focus. By default its value is true.

Syntax

$(".selector").dialog(
   { closeOnEscape: false }
);
5 关闭文本

此选项包含用于替换关闭按钮的默认“关闭”的文本。默认情况下，其值为“close”。

Option - closeText

This option contains text to replace the default of Close for the close button. By default its value is "close".

Syntax

$(".selector").dialog(
   { closeText: "hide" }
);
6 对话框类

如果此选项设置为false，它将阻止ui-draggable类添加到所选 DOM 元素列表中。默认情况下它的值为""。

Option - dialogClass

If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is "".

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 可拖动的

除非您将此选项设置为false，否则将通过单击并拖动标题栏来拖动对话框。默认情况下它的值为true。

Option - draggable

Unless you this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true.

Syntax

$(".selector").dialog(
   { draggable: false }
);
8 高度

该选项设置对话框的高度。默认情况下，其值为“auto”。

Option - height

If this option sets the height of the dialog box. By default its value is "auto". This option can be of type −

This can be of type −

  • Number − This specifies duration in milliseconds

  • String − The only supported string value is auto which will allow the dialog height to adjust based on its content.

Syntax

$(".selector").dialog(
   { height: 400 }
);
9 隐藏

该选项用于设置对话框关闭时使用的效果。默认情况下它的值为null。

Option - hide

This option is used to set the effect to be used when the dialog box is closed. By default its value is null.

This can be of type −

  • Boolean − Values could be true/false. If false no animation will be used and the dialog will be hidden immediately. If true, the dialog will fade out with the default duration and the default easing.

  • Number − The dialog will fade out with the specified duration and the default easing.

  • String − The dialog will be hidden using the specified effect such as slideUp, fold.

  • Object − If the value is an object, then effect, delay, duration, and easing properties may be provided to hide the dialog.

    10

Syntax

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11 最大高度

此选项设置对话框大小可调整到的最大高度（以像素为单位）。默认情况下它的值为false。

Option - maxHeight

This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false.

Syntax

$(".selector").dialog(
   { maxHeight: 600 }
);
12 最大宽度

此选项设置对话框可调整大小的最大宽度（以像素为单位）。默认情况下它的值为false。

Option - maxWidth

This option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false.

Syntax

$(".selector").dialog(
   { maxWidth: 600 }
);
13 最小高度

此选项是对话框大小可调整到的最小高度（以像素为单位）。默认情况下，其值为150。

Option - minHeight

This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150.

Syntax

$(".selector").dialog(
   { minHeight: 200 }
);
14 最小宽度

此选项是对话框大小可调整到的最小宽度（以像素为单位）。默认情况下，其值为150。

Option - minWidth

This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150.

Syntax

$(".selector").dialog(
   { minWidth: 200 }
);
15 莫代尔

如果此选项设置为true，对话框将具有模态Behave；页面上的其他项目将被禁用，即无法与之交互。模式对话框在对话框下方但在其他页面元素上方创建一个覆盖层。默认情况下它的值为false。

Option - modal

If this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements. By default its value is false.

Syntax

$(".selector").dialog(
   { modal: true }
);
16 位置

该选项指定对话框的初始位置。可以是预定义位置之一：center （默认）、 left、 right、 top 或 Bottom。也可以是 2 元素数组，其中左侧值和顶部值（以像素为单位）为 [left,top]，或文本位置，例如 ['right','top']。默认情况下，其值为{ my: "center", at: "center", of: window }。

Option - position

This option specifies the initial position of the dialog box. Can be one of the predefined positions: center (the default), left, right, top, or bottom. Can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as ['right','top']. By default its value is { my: "center", at: "center", of: window }.

Syntax

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17 号 可调整大小

除非将此选项设置为false，否则对话框可在所有方向上调整大小。默认情况下它的值为true。

Option - resizable

This option unless set to false, the dialog box is resizable in all directions. By default its value is true.

Syntax

$(".selector").dialog(
   { resizable: false }
);
18 展示

该选项是打开对话框时使用的效果。默认情况下它的值为null。

Option - show

This option is an effect to be used when the dialog box is being opened. By default its value is null.

This can be of type −

  • Boolean − Values could be true/false. If false no animation will be used and the dialog will be shonw immediately. If true, the dialog will fade in with the default duration and the default easing.

  • Number − The dialog will fade in with the specified duration and the default easing.

  • String − The dialog will be shown using the specified effect such as slideDown, fold.

  • Object − If the value is an object, then effect, delay, duration, and easing properties may be provided to show the dialog.

    19

Syntax

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
20 标题

该选项指定对话框标题栏中显示的文本。默认情况下它的值为null。

Option - title

This option specifies the text to appear in the title bar of the dialog box. By default its value is null.

Syntax

$(".selector").dialog(
   { title: "Dialog Title" }
);
21 宽度

此选项指定对话框的宽度（以像素为单位）。默认情况下，其值为300。

Option - width

This option specifies the width of the dialog box in pixels. By default its value is 300.

Syntax

$(".selector").dialog(
   { width: 500 }
);

以下部分将向您展示对话框功能的一些工作示例。

默认功能

以下示例演示了一个不向dialog()方法传递任何参数的对话框功能的简单示例。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

按钮、标题和位置的使用

下面的例子演示了JqueryUI的对话框小部件中三个选项按钮、标题和位置的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

使用隐藏、显示和高度

以下示例演示了JqueryUI 对话框小部件中hide、show和height三个选项的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

模态的使用

下面的例子演示了JqueryUI的对话框小部件中三个选项按钮、标题和位置的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

$(selector, context).dialog("action", [params]) 方法

dialog (action, params)方法可以对对话框执行操作，例如关闭对话框。该操作在第一个参数中指定为字符串，并且可以根据给定的操作提供一个或多个参数（可选）。

基本上，这里的操作什么都不是，只是我们可以以字符串形式使用的 jQuery 方法。

句法

$(selector, context).dialog ("action", [params]);

下表列出了此方法的操作 -

先生。 动作与描述
1 关闭（）

此操作将关闭对话框。此方法不接受任何参数。

Action - close()

This action closes the dialog box. This method does not accept any arguments.

Syntax

$(".selector").dialog("close");
2 破坏（）

此操作将完全删除该对话框。这将使元素返回到其预初始化状态。此方法不接受任何参数。

Action - destroy()

This action removes the dialog box competely. This will return the element back to its pre-init state. This method does not accept any arguments.

Syntax

$(".selector").dialog("destroy");
3 开了（）

此操作检查对话框是否打开。此方法不接受任何参数。

Action - isOpen()

This action checks if the dialog box is open. This method does not accept any arguments.

Syntax

$(".selector").dialog("isOpen");
4 移动到顶部()

此操作将相应的对话框定位到前台（在其他对话框的顶部）。此方法不接受任何参数。

Action - moveToTop()

This action positions the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments.

Syntax

$(".selector").dialog("moveToTop");
5 打开（）

此操作将打开对话框。此方法不接受任何参数。

Action - open()

This action opens the dialog box. This method does not accept any arguments.

Syntax

$(".selector").dialog("open");
6 选项（选项名称）

此操作获取当前与指定 optionName 关联的值。其中optionName是要获取的选项的名称。

Action - option( optionName )

This action gets the value currently associated with the specified optionName. Where optionName is the name of the option to get.

Syntax

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7 选项（）

此操作获取一个对象，其中包含表示当前对话框选项哈希的键/值对。此方法不接受任何参数。

Action - option()

This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments.

Syntax

var options = $( ".selector" ).dialog( "option" );
8 选项（选项名称，值）

此操作设置与指定 optionName 关联的对话框选项的值。

Action - option( optionName, value )

This action sets the value of the dialog option associated with the specified optionName.

Syntax

$(".selector").dialog( "option", "disabled", true );
9 选项（选项）

此操作为对话框设置一个或多个选项。

Action - option( options )

This action sets one or more options for the dialog.

Syntax

$(".selector").dialog( "option", { disabled: true });
10 小部件（）

此操作返回对话框的小部件元素；用 ui-dialog 类名注释的元素。此方法不接受任何参数。

Action - widget()

This action returns the dialog box’s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.

Syntax

$(".selector").dialog("widget");

例子

现在让我们看一个使用上表中的操作的示例。以下示例演示了isOpen()、open()和close()方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 -

对话框中的事件管理

In addition to the dialog (options) method which we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are listed below −

Sr.No. Event Method & Description
1 beforeClose(event, ui)

This event is triggered when the dialog box is about to close. Returning false prevents the dialog box from closing. It is handy for dialog boxes with forms that fail validation. Where event is of type Event, and ui is of type Object.

Event - beforeClose(event, ui)

This event is triggered when the dialog box is about to close. Returning false prevents the dialog box from closing. It is handy for dialog boxes with forms that fail validation. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
2 close(event, ui)

This event is triggered when the dialog box is closed. Where event is of type Event, and ui is of type Object.

Event - close(event, ui)

This event is triggered when the dialog box is closed. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").dialog (
   close: function(event, ui) {}
);
3 create(event, ui)

This event is triggered when the dialog box is created. Where event is of type Event, and ui is of type Object.

Event - create(event, ui)

This event is triggered when the dialog box is created. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").dialog (
   create: function(event, ui) {}
);
4 drag(event, ui)

This event is triggered repeatedly as a dialog box is moved about during a drag. Where event is of type Event, and ui is of type Object.

Event - drag(event, ui)

This event is triggered repeatedly as a dialog box is moved about during a drag. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • position − A jQuery object representing the current CSS position of the dialog.

  • offset − A jQuery object representing the current offset position of the dialog.

Syntax

$(".selector").dialog (
   drag: function(event, ui) {}
);
5 dragStart(event, ui)

This event is triggered when a repositioning of the dialog box commences by dragging its title bar. Where event is of type Event, and ui is of type Object.

Event - dragStart(event, ui)

This event is triggered when a repositioning of the dialog box commences by dragging its title bar. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • position − A jQuery object representing the current CSS position of the dialog.

  • offset − A jQuery object representing the current offset position of the dialog.

Syntax

$(".selector").dialog (
   dragStart: function(event, ui) {}
);
6 dragStop(event, ui)

This event is triggered when a drag operation terminates. Where event is of type Event, and ui is of type Object.

Event - dragStop(event, ui)

This event is triggered when a drag operation terminates. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • position − A jQuery object representing the current CSS position of the dialog.

  • offset − A jQuery object representing the current offset position of the dialog.

Syntax

$(".selector").dialog (
   dragStop: function(event, ui) {}
);
7 focus(event, ui)

This event is triggered when the dialog gains focus. Where event is of type Event, and ui is of type Object.

Event - focus(event, ui)

This event is triggered when the dialog gains focus. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").dialog (
   focus: function(event, ui) {}
);
8 open(event, ui)

This event is triggered when the dialog box is opened. Where event is of type Event, and ui is of type Object.

Event - open(event, ui)

This event is triggered when the dialog box is opened. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").dialog (
   open: function(event, ui) {}
);
9 resize(event, ui)

This event is triggered repeatedly as a dialog box is resized. Where event is of type Event, and ui is of type Object.

Event - resize(event, ui)

This event is triggered repeatedly as a dialog box is resized. Where event is of type Event, and ui is of type Object.Possible values of ui are −

  • originalPosition − A jQuery object representing CSS position of the dialog prior to being resized.

  • position − A jQuery object representing the current CSS position of the dialog.

  • originalSize − A jQuery object representing the size of the dialog prior to being resized.

  • size − A jQuery object representing the current size of the dialog.

Syntax

$(".selector").dialog (
   resize: function(event, ui) {}
);
10 resizeStart(event, ui)

This event is triggered when a resize of the dialog box commences. Where event is of type Event, and ui is of type Object.

Event - resizeStart(event, ui)

This event is triggered when a resize of the dialog box commences. Where event is of type Event, and ui is of type Object.Possible values of ui are −

  • originalPosition − A jQuery object representing CSS position of the dialog prior to being resized.

  • position − A jQuery object representing the current CSS position of the dialog.

  • originalSize − A jQuery object representing the size of the dialog prior to being resized.

  • size − A jQuery object representing the current size of the dialog.

Syntax

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
11 resizeStop(event, ui)

当对话框的大小调整终止时，会触发此事件。其中event的类型为Event，而ui的类型为Object。

Event - resizeStop(event, ui)

This event is triggered when a resize of the dialog box terminates. Where event is of type Event, and ui is of type Object.Possible values of ui are −

  • originalPosition − A jQuery object representing CSS position of the dialog prior to being resized.

  • position − A jQuery object representing the current CSS position of the dialog.

  • originalSize − A jQuery object representing the size of the dialog prior to being resized.

  • size − A jQuery object representing the current size of the dialog.

Syntax

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

以下示例演示了上表中列出的事件的使用。

beforeClose 事件方法的使用

以下示例演示了beforeClose事件方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 -

使用resize事件方法

下面的例子演示了resize事件方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dialogexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 -

扩展点

对话框小部件是使用小部件工厂构建的，并且可以扩展。要扩展小部件，我们可以覆盖或添加现有方法的Behave。以下方法提供了与对话框方法具有相同 API 稳定性的扩展点。列于上表。

先生。 方法及说明
1 _allowInteraction(事件)

此方法允许用户通过将不是对话框子级但允许用户使用的元素列入白名单来与给定目标元素进行交互。其中event的类型为Event。

Extension Point - allowInteraction(event, ui)

This method allows the user to interact with a given target element by whitelisting elements that are not children of the dialog but allow the users to be able to use. Where event is of type Event.

Code Example

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • Select2 plugin is used within modal dialogs

  • super() call ensures elements within the dialog can still be interacted with.
jQuery UI Widget Factory 是一个可扩展的基础，所有 jQuery UI 的小部件都是在此基础上构建的。使用小部件工厂构建插件为状态管理提供了便利，并为常见任务（例如公开插件方法和实例化后更改选项）提供了约定。