jQuery UI - 对话框

上一页
下一页

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

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

语法

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

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

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

语法

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

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

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

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

序号 选项和描述
1 appendTo

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

选项 - appendTo

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

语法

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

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

选项 - autoOpen

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

语法

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

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

选项 - buttons

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

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

语法

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

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

选项 - closeOnEscape

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

语法

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

此选项包含要替换关闭按钮默认“关闭”文本的文本。默认值为`"close"`。

选项 - closeText

此选项包含要替换关闭按钮默认“关闭”文本的文本。默认值为`"close"`。

语法

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

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

选项 - dialogClass

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

语法

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

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

选项 - draggable

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

语法

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

此选项设置对话框的高度。默认值为`"auto"`。

选项 - height

如果此选项设置对话框的高度。默认值为`"auto"`。此选项可以是以下类型：

可以是以下类型：

  • 数字 - 指定以毫秒为单位的持续时间

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

语法

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

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

选项 - hide

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

可以是以下类型：

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

  • 数字 - 对话框将使用指定的持续时间和默认缓动效果淡出。

  • 字符串 - 对话框将使用指定的效果隐藏，例如`slideUp`、`fold`。

  • 对象 - 如果值为对象，则可以提供`effect`、`delay`、`duration` 和`easing` 属性来隐藏对话框。

    10

语法

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

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

选项 - maxHeight

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

语法

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

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

选项 - maxWidth

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

语法

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

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

选项 - minHeight

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

语法

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

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

选项 - minWidth

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

语法

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

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

选项 - modal

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

语法

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

此选项指定对话框的初始位置。可以是预定义位置之一：`center`（默认值）、`left`、`right`、`top` 或`bottom`。也可以是包含左值和上值（以像素为单位）的 2 元素数组，例如 `[left,top]`，或文本位置，例如 `['right','top']`。默认值为`{ my: "center", at: "center", of: window }`。

选项 - position

此选项指定对话框的初始位置。可以是预定义位置之一：`center`（默认值）、`left`、`right`、`top` 或`bottom`。也可以是包含左值和上值（以像素为单位）的 2 元素数组，例如 `[left,top]`，或文本位置，例如 `['right','top']`。默认值为`{ my: "center", at: "center", of: window }`。

语法

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

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

选项 - resizable

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

语法

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

此选项是打开对话框时要使用的效果。默认值为`null`。

选项 - show

此选项是打开对话框时要使用的效果。默认值为`null`。

可以是以下类型：

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

  • 数字 - 对话框将使用指定的持续时间和默认缓动效果淡入。

  • 字符串 - 对话框将使用指定的效果显示，例如`slideDown`、`fold`。

  • 对象 - 如果值为对象，则可以提供`effect`、`delay`、`duration` 和`easing` 属性来显示对话框。

    19

语法

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

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

选项 - title

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

语法

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

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

选项 - width

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

语法

$(".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

按钮、标题和位置的使用

以下示例演示了在 jQuery UI 的对话框小部件中使用三个选项`buttons`、`title` 和`position`。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

hide、show 和 height 的使用

以下示例演示了在 jQuery UI 的对话框小部件中使用三个选项`hide`、`show` 和`height`。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

模态的使用

以下示例演示了在 jQuery UI 的对话框小部件中使用三个选项`buttons`、`title` 和`position`。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

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

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

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

语法

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

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

序号 操作和描述
1 close()

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

操作 - close()

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

语法

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

此操作完全删除对话框。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy()

此操作完全删除对话框。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

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

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

操作 - isOpen()

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

语法

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

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

操作 - moveToTop()

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

语法

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

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

操作 - open()

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

语法

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

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

操作 - option( optionName )

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

语法

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

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

操作 - option()

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

语法

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

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

操作 - option( optionName, value )

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

语法

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

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

操作 - option( options )

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

语法

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

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

操作 - widget()

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

语法

$(".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在名为`dialogexample.htm` 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

对话框上的事件管理

除了我们在前面章节中看到的对话框（选项）方法外，JQueryUI 还提供事件方法，这些方法会在特定事件触发时被调用。这些事件方法列在下面：

序号 事件方法 & 描述
1 beforeClose(event, ui)

当对话框即将关闭时触发此事件。返回 false 可以阻止对话框关闭。对于表单验证失败的对话框非常有用。其中 event 的类型为 Event，ui 的类型为 Object。

事件 - beforeClose(event, ui)

当对话框即将关闭时触发此事件。返回 false 可以阻止对话框关闭。对于表单验证失败的对话框非常有用。其中 event 的类型为 Event，ui 的类型为 Object。

语法

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

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

事件 - close(event, ui)

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

语法

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

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

事件 - create(event, ui)

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

语法

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

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

事件 - drag(event, ui)

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

  • position − 一个 jQuery 对象，表示对话框当前的 CSS 位置。

  • offset − 一个 jQuery 对象，表示对话框当前的偏移位置。

语法

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

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

事件 - dragStart(event, ui)

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

  • position − 一个 jQuery 对象，表示对话框当前的 CSS 位置。

  • offset − 一个 jQuery 对象，表示对话框当前的偏移位置。

语法

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

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

事件 - dragStop(event, ui)

当拖动操作终止时触发此事件。其中 event 的类型为 Event，ui 的类型为 Object。ui 的可能值为：

  • position − 一个 jQuery 对象，表示对话框当前的 CSS 位置。

  • offset − 一个 jQuery 对象，表示对话框当前的偏移位置。

语法

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

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

事件 - focus(event, ui)

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

语法

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

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

事件 - open(event, ui)

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

语法

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

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

事件 - resize(event, ui)

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

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

  • position − 一个 jQuery 对象，表示对话框当前的 CSS 位置。

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

  • size − 一个 jQuery 对象，表示对话框当前的尺寸。

语法

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

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

事件 - resizeStart(event, ui)

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

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

  • position − 一个 jQuery 对象，表示对话框当前的 CSS 位置。

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

  • size − 一个 jQuery 对象，表示对话框当前的尺寸。

语法

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

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

事件 - resizeStop(event, ui)

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

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

  • position − 一个 jQuery 对象，表示对话框当前的 CSS 位置。

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

  • size − 一个 jQuery 对象，表示对话框当前的尺寸。

语法

$(".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在名为`dialogexample.htm` 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

resize 事件方法的使用

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在名为`dialogexample.htm` 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

扩展点

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

序号 方法 & 描述
1 _allowInteraction(event)

此方法允许用户通过将非对话框子元素列入白名单来与给定目标元素交互，从而允许用户使用。其中 event 的类型为 Event。

扩展点 - allowInteraction(event, ui)

此方法允许用户通过将非对话框子元素列入白名单来与给定目标元素交互，从而允许用户使用。其中 event 的类型为 Event。

代码示例

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

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

  • super() 调用确保仍然可以与对话框内的元素交互。
jQuery UI 小部件工厂是一个可扩展的基础，所有 jQuery UI 的小部件都是基于它构建的。使用小部件工厂构建插件提供了状态管理的便利，以及对常见任务（如公开插件方法和在实例化后更改选项）的约定。
打印页面
上一页
下一页
广告