登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

对话（Dialog）

优质
小牛编辑
133浏览
2023-12-01

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

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

语法 (Syntax)

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

  • $(selector, context).dialog (options)方法

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

$ (selector, context).dialog（选项）方法

dialog (options)方法声明可以以对话框的形式管理HTML元素。 options参数是一个对象，它指定该窗口的外观和行为。

语法 (Syntax)

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

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

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

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

Sr.No.选项和说明
1appendTo

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

Option - appendTo

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

Syntax

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2autoOpen

此选项除非设置为false ，否则会在创建时打开该对话框。 如果为false ，则在调用对话框（“打开”）时将打开对话框。 默认情况下，其值为true 。

Option - autoOpen

此选项除非设置为false ，否则会在创建时打开该对话框。 如果为false ，则在调用对话框（“打开”）时将打开对话框。 默认情况下，其值为true 。

Syntax

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

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

Option - buttons

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

使用对话框元素的函数上下文调用此处理程序，并将按钮设置为目标属性传递事件实例。 如果省略，则不会为对话框创建任何按钮。

Syntax

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

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

Option - closeOnEscape

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

Syntax

$(".selector").dialog(
   { closeOnEscape: false }
);
5closeText

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

Option - closeText

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

Syntax

$(".selector").dialog(
   { closeText: "hide" }
);
6dialogClass

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

Option - dialogClass

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

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7draggable

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

Option - draggable

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

Syntax

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

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

Option - height

如果此选项设置对话框的高度。 默认情况下，其值为"auto" 。 此选项可以是 -

这可以是 -

  • Number - 指定持续时间（以毫秒为单位）

  • String - 唯一支持的字符串值是auto ，它允许对话框高度根据其内容进行调整。

Syntax

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

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

Option - hide

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

这可以是 -

  • Boolean - 值可以是true/false 。 如果为false则不使用动画，对话框将立即隐藏。 如果为true ，则对话框将以默认持续时间和默认缓动淡出。

  • Number - 对话框将以指定的持续时间和默认缓动淡出。

  • String - 将使用指定的效果（如slideUp ， fold隐藏对话框。

  • Object - 如果值是对象，则可以提供effect, delay, duration, easing属性来隐藏对话框。

    10

Syntax

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11maxHeight

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

Option - maxHeight

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

Syntax

$(".selector").dialog(
   { maxHeight: 600 }
);
12maxWidth

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

Option - maxWidth

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

Syntax

$(".selector").dialog(
   { maxWidth: 600 }
);
13minHeight

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

Option - minHeight

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

Syntax

$(".selector").dialog(
   { minHeight: 200 }
);
14minWidth

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

Option - minWidth

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

Syntax

$(".selector").dialog(
   { minWidth: 200 }
);
15modal

如果此选项设置为true ，则对话框将具有模态行为; 页面上的其他项目将被禁用，即无法与之交互。 模态对话框在对话框下方创建叠加层，但在其他页面元素上方。 默认情况下，其值为false 。

Option - modal

如果此选项设置为true ，则对话框将具有模态行为; 页面上的其他项目将被禁用，即无法与之交互。 模态对话框在对话框下方创建叠加层，但在其他页面元素上方。 默认情况下，其值为false 。

Syntax

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

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

Option - position

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

Syntax

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17resizable

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

Option - resizable

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

Syntax

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

此选项是打开对话框时要使用的效果。 默认情况下，其值为null 。

Option - show

此选项是打开对话框时要使用的效果。 默认情况下，其值为null 。

这可以是 -

  • Boolean - 值可以是true/false 。 如果为false则不使用动画，对话框将立即显示。 如果为true ，则对话框将以默认持续时间和默认缓动方式淡入。

  • Number - 对话框将以指定的持续时间和默认缓动方式淡入。

  • String - 将使用指定的效果（如slideDown ， fold显示对话框。

  • Object - 如果值是对象，则可以提供effect, delay, duration, easing属性以显示对话框。

    19

Syntax

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

此选项指定要在对话框的标题栏中显示的文本。 默认情况下，其值为null 。

Option - title

此选项指定要在对话框的标题栏中显示的文本。 默认情况下，其值为null 。

Syntax

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

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

Option - width

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

Syntax

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

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

默认的功能 (Default functionality)

下面的示例演示了一个简单的对话框功能示例，它不向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对话框小部件中三个选项buttons ， title和position的用法。

<!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对话框小部件中三个选项buttons ， title和position的用法。

<!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)方法可以在对话框上执行操作，例如关闭框。 该action在第一个参数中指定为字符串，并且可选地，可以基于给定的操作提供一个或多个params 。

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

语法 (Syntax)

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

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

Sr.No.行动和描述
1close()

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

Action - close()

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

Syntax

$(".selector").dialog("close");
2destroy()

此操作可以有效地删除对话框。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy()

此操作可以有效地删除对话框。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

$(".selector").dialog("destroy");
3isOpen()

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

Action - isOpen()

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

Syntax

$(".selector").dialog("isOpen");
4moveToTop()

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

Action - moveToTop()

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

Syntax

$(".selector").dialog("moveToTop");
5open()

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

Action - open()

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

Syntax

$(".selector").dialog("open");
6option( optionName )

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7option()

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

Action - option()

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

Syntax

var options = $( ".selector" ).dialog( "option" );
8option( optionName, value )

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

Action - option( optionName, value )

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

Syntax

$(".selector").dialog( "option", "disabled", true );
9option( options )

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

Action - option( options )

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

Syntax

$(".selector").dialog( "option", { disabled: true });
10widget()

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

Action - widget()

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

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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的标准浏览器中打开它

对话框上的事件管理

除了我们在前面几节中看到的dialog（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1beforeClose(event, ui)

当对话框即将关闭时，将触发此事件。 返回false阻止对话框关闭。 对于包含未通过验证的表单的对话框，它很方便。 其中event是Event类型， ui是Object类型。

Event - beforeClose(event, ui)

当对话框即将关闭时，将触发此事件。 返回false阻止对话框关闭。 对于包含未通过验证的表单的对话框，它很方便。 其中event是Event类型， ui是Object类型。

Syntax

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

关闭对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - close(event, ui)

关闭对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

创建对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - create(event, ui)

创建对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

在拖动过程中移动对话框时会重复触发此事件。 其中event是Event类型， ui是Object类型。

Event - drag(event, ui)

在拖动过程中移动对话框时会重复触发此事件。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • position - 表示对话框当前CSS位置的jQuery对象。

  • offset - 表示对话框当前偏移位置的jQuery对象。

Syntax

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

通过拖动标题栏开始重新定位对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - dragStart(event, ui)

通过拖动标题栏开始重新定位对话框时会触发此事件。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • position - 表示对话框当前CSS位置的jQuery对象。

  • offset - 表示对话框当前偏移位置的jQuery对象。

Syntax

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

拖动操作终止时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - dragStop(event, ui)

拖动操作终止时会触发此事件。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • position - 表示对话框当前CSS位置的jQuery对象。

  • offset - 表示对话框当前偏移位置的jQuery对象。

Syntax

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

当对话框获得焦点时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - focus(event, ui)

当对话框获得焦点时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

打开对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - open(event, ui)

打开对话框时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

调整对话框大小时会重复触发此事件。 其中event是Event类型， ui是Object类型。

Event - resize(event, ui)

调整对话框大小时会重复触发此事件。 其中event是Event类型， ui是Object类型.ui的可能值是 -

  • originalPosition - 一个jQuery对象，表示在调整大小之前对话框的CSS位置。

  • position - 表示对话框当前CSS位置的jQuery对象。

  • originalSize - 一个jQuery对象，表示调整大小之前对话框的大小。

  • size - 表示对话框当前大小的jQuery对象。

Syntax

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

当对话框的调整大小开始时，将触发此事件。 其中event是Event类型， ui是Object类型。

Event - resizeStart(event, ui)

当对话框的调整大小开始时，将触发此事件。 其中event是Event类型， ui是Object类型.ui的可能值是 -

  • originalPosition - 一个jQuery对象，表示在调整大小之前对话框的CSS位置。

  • position - 表示对话框当前CSS位置的jQuery对象。

  • originalSize - 一个jQuery对象，表示调整大小之前对话框的大小。

  • size - 表示对话框当前大小的jQuery对象。

Syntax

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

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

Event - resizeStop(event, ui)

当对话框的调整大小终止时，将触发此事件。 其中event是Event类型， ui是Object类型.ui的可能值是 -

  • originalPosition - 一个jQuery对象，表示在调整大小之前对话框的CSS位置。

  • position - 表示对话框当前CSS位置的jQuery对象。

  • originalSize - 一个jQuery对象，表示调整大小之前对话框的大小。

  • size - 表示对话框当前大小的jQuery对象。

Syntax

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

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

使用beforeClose Event方法

以下示例演示了使用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 Event方法

以下示例演示了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的标准浏览器中打开它

扩展点

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

Sr.No.方法和描述
1_allowInteraction(event)

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

Extension Point - allowInteraction(event, ui)

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

Code Example

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

  • Select2插件用于模态对话框中

  • super（）调用确保对话框中的元素仍然可以与之交互。

jQuery UI Widget Factory是一个可扩展的基础，可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利，也为常见任务提供了便利，例如公开插件方法和在实例化后更改选项。
免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn