JqueryUI教程

JqueryUI - 对话

← 上一节 下一节 →

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

jQueryUI提供转换HTML代码的 dialog()方法在页面上写入HTML代码以显示一个对话框.

语法

对话框()方法可以是以两种形式使用 :

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

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

  

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

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

语法

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


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

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


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

Sr.No.选项&安培;描述
1appendTo

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

选项 -  appendTo

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

语法 

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

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

选项 - 自动打开

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

语法 

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

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

选项 - 按钮

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

使用对话框元素的函数上下文调用此处理程序，并使用按钮集传递事件实例作为目标财产.如果省略，则不会为对话框创建任何按钮.

语法 

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

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

选项 -  closeOnEscape

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

语法 

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

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

选项 -  closeText

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

语法 

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

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

选项 -  dialogClass

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

语法 

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

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

选项 - 可拖动

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

语法 

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

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

选项 - 身高

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

这可以是 :

  • 数字 : 这指定持续时间(以毫秒为单位)

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

语法 

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

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

选项 - 隐藏

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

这可以是 :

  • 布尔 : 值可以是 true/false .如果 false 将不使用任何动画，并且会立即隐藏对话框.如果 true ，对话框将以默认持续时间和默认缓动淡出.

  • 数字 &减去;该对话框将以指定的持续时间和默认缓动淡出.

  • String : 该对话框将使用指定的效果隐藏，例如 slideUp ，折叠.

  • 对象 : 如果值是对象，则可以提供效果，延迟，持续时间，和缓动属性来隐藏对话框.

    10

语法 

 
 $(".selector").对话框(
 {hide:{effect:"explode"，duration:1000}} 
);
11maxHeight

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

选项 -  maxHeight

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

语法 

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

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

选项 -  maxWidth

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

语法 

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

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

选项 -  minHeight

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

语法 

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

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

选项 -  minWidth

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

语法 

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

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

选项 - 模态

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

语法 

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

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

选项 - 位置

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

语法 

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

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

选项 - 可调整大小

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

语法 

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

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

选项 - 显示

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

这可以是 :

  • 布尔 : 值可以是 true/false .如果 false 将不使用任何动画，并且会立即显示对话框.如果 true ，对话框将以默认持续时间和默认缓动方式淡入.

  • 数字 &减去;该对话框将以指定的持续时间和默认缓动淡入.

  • String : 该对话框将使用指定的效果显示，例如 slideDown ， fold .

  • 对象 : 如果值是对象，则可以提供效果，延迟，持续时间，和缓动属性来显示对话框.

    19

语法 

 
 $(".selector").对话框(
 {show:{effect:"blind"，duration:800}} 
);
20title

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

选项 - 标题

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

语法 

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

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

选项 - 宽度

此选项指定对话框的宽度(以像素为单位).默认情况下，其值 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.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的标准浏览器中打开它，您还必须看到以下输出。 现在，您可以使用结果

使用 hide, show 和 height

以下示例演示了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]);

下表列出了此方法的操作 

Sr.No.Action & Description
1close()

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

Action - close()

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

Syntax

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

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

Action - destroy()

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

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");

示例

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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.Event Method & Description
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 : 一个jQuery对象，表示对话框的当前CSS位置。

  • 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 : 一个jQuery对象，表示对话框的当前CSS位置。

  • 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 : 一个jQuery对象，表示对话框的当前CSS位置。

  • 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 : 一个jQuery对象，表示对话框的当前CSS位置。

  • 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 : 一个jQuery对象，表示对话框的当前CSS位置。

  • 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 : 一个jQuery对象，表示对话框的当前CSS位置。

  • 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.Method & Description
1_allowInteraction(event)

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


 
 

延伸点 - allowInteraction(event, ui)

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

Code Example

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

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

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


 
 
jQuery UI Widget Factory是一个可扩展的基础，可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利，也为常见任务提供了约定，例如公开插件方法和在实例化后更改选项。
← 上一节 下一节 →

相关菜鸟教程