jquery dialog api

最新推荐文章于 2024-08-26 08:10:27 发布
最新推荐文章于 2024-08-26 08:10:27 发布
阅读量5.1k 收藏 3
点赞数
分类专栏： jquery

一、常见的属性、方法、事件

Options

Methods


Extension Points

Events




















对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。对话框窗口可以移动，重新调整大小，默认情况下通过 'x' 图标关闭。

如果内容长度超过最大高度，一个滚动条会自动出现。

一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。

焦点

当打开一个对话框时，焦点会自动移动到满足下面条件的第一个项目：

  1. 带有 autofocus 属性的对话框内的第一个元素
  2. 对话框内容内的第一个 :tabbable 元素
  3. 对话框按钮面板内的第一个 :tabbable 元素
  4. 对话框的关闭按钮
  5. 对话框本身

当打开时，对话框部件（Dialog Widget）确保通过 tab 切换对话框内元素间的焦点，不包括对话框外的元素。模态对话框防止鼠标用户点击对话框外的元素。

当关闭对话框时，焦点自动返回到之前对话框打开时获得焦点的元素上。

隐藏关闭按钮

在一些情况下，您可能想要隐藏关闭按钮，例如，在按钮面板中已经有一个关闭按钮的情况。最好的解决方法是通过 CSS。作为实例，您可以定义一个简单的规则，比如：

1
2
3 
       
       

        
        

         
         .no-close .ui-dialog-titlebar-close {
        
        

       
       

       
       

        
        

         
           display: none;
        
        

       
       

       
       

        
        

         
         }

然后，您可以添加 no-close class 到任意的对话框，用来隐藏关闭按钮：

1
2
3
4
5
6
7
8
9
10
11 
       
       

        
        

         
         $( "#dialog" ).dialog({
        
        

       
       

       
       

        
        

         
           dialogClass: "no-close",
        
        

       
       

       
       

        
        

         
           buttons: [
        
        

       
       

       
       

        
        

         
             {
        
        

       
       

       
       

        
        

         
               text: "OK",
        
        

       
       

       
       

        
        

         
               click: function() {
        
        

       
       

       
       

        
        

         
                 $( this ).dialog( "close" );
        
        

       
       

       
       

        
        

         
               }
        
        

       
       

       
       

        
        

         
             }
        
        

       
       

       
       

        
        

         
           ]
        
        

       
       

       
       

        
        

         
         });

主题

对话框部件（Dialog Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用对话框指定的样式，则可以使用下面的 CSS class 名称：

  • ui-dialog：对话框的外层容器。
    • ui-dialog-titlebar：包含对话框标题和关闭按钮的标题栏。
      • ui-dialog-title：对话框文本标题周围的容器。
      • ui-dialog-titlebar-close：对话框的关闭按钮。
    • ui-dialog-content：对话框内容周围的容器。这也是部件被实例化的元素。
    • ui-dialog-buttonpane：包含对话按钮的面板。只有当设置了 buttons 选项时才呈现。
      • ui-dialog-buttonset：按钮周围的容器。

此外，当设置了 modal 选项时，一个带有 ui-widget-overlay class 名称的元素被追加到 <body>。

依赖

其他注意事项：

  • 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

Options

appendToType: Selector

Default:  "body"

dialog（和遮罩层，如果modal存在）应该被追加到哪个元素。

注意:当dialog处于打开状态的时候 appendTo选项不应该被改变。
(version added: 1.10.0)
Code examples:

初始化带有指定 appendTo选项的 dialog：

1 
       
       

        
        

         
         $( ".selector" ).dialog({ appendTo: "#someElem" });

在初始化后，获取或设置appendTo 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "appendTo", "#someElem" );

autoOpenType: Boolean

Default:  true
当设置为   true  时， dialog 会在初始化时自动打开. 如果为   false  dialog 将会继续隐藏直到调用 open()方法 。
Code examples:

初始化带有指定 autoOpen选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置autoOpen 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "autoOpen", false );

buttonsType: Object or Array

Default:  {}
指定哪些按钮应该在dialog上显示。 回调的上下文是dialog元素（愚人码头注： this指向）; 如果你需要访问按钮， 可以利用事件对象的目标元素。
支持多个类型：
  • Object: 键是按钮标签，值是点击相关按钮时执行的回调函数。
  • Array: 该数组的每个元素必须是 一个定义特性，属性，和按钮上设置的事件处理程序的对象。
Code examples:

初始化带有指定 buttons选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置buttons 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var buttons = $( ".selector" ).dialog( "option", "buttons" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

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

closeOnEscapeType: Boolean

Default:  true
指定具有焦点的dialog，在用户按下退出（ESC）键时，是否应该关闭 。
Code examples:

初始化带有指定 closeOnEscape选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置closeOnEscape 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "closeOnEscape", false );

closeTextType: String

Default:  "close"
指定关闭按钮的文本。 注意，关闭文本在使用标准的主题时，是隐藏的（visibly：hidden）。
Code examples:

初始化带有指定 closeText选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置closeText 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var closeText = $( ".selector" ).dialog( "option", "closeText" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "closeText", "hide" );

dialogClassType: String

Default:  ""
在使用额外附加的主题时，指定dialog的类名称，这些样式添加到dialog上。
Code examples:

初始化带有指定 dialogClass选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置dialogClass 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "dialogClass", "alert" );

draggableType: Boolean

Default:  true
如果设置为 true, dialog将可以使用标题栏实现拖动。需要包含   jQuery UI Draggable 部件。
Code examples:

初始化带有指定 draggable选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置draggable 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var draggable = $( ".selector" ).dialog( "option", "draggable" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "draggable", false );

heightType: Number or String

Default:  "auto"
设置对话框的高度（单位：像素）。
支持多个类型：
  • Number: 高度，单位：像素。
  • String: 唯一支持的字符串值为"auto"，这将使对话框高度根据其内容进行自动调整。
Code examples:

初始化带有指定 height选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置height 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var height = $( ".selector" ).dialog( "option", "height" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "height", 400 );

hideType: Boolean or Number or String or Object

Default:  null
dialog关闭（隐藏）时的动画效果。
支持多个类型：
  • Boolean: 当设置为false， 将不使用动画效果，该dialog会立即被隐藏。 如果设置为true， 该dialog将会以默认的持续时间和默认的效果淡出。
  • Number: 该dialog将以指定的时间和默认的效果淡出。
  • String: 该dialog将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称， 如"slideUp"， 或一个 jQuery UI 效果的名称， 如"fold"。 在这两种情况下，将使用默认持续时间和默认的动画效果。
  • Object: 如果该值是一个对象， 那么 effect, delay, duration, 和easing可能要提供。  如果 effect 属性包含一个jQuery方法的名称， 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 ， 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration持续时间或easing属性被省略， 那么默认值将被使用。 如果effect被省略， 那么"fadeOut" 将被使用。如果delay被省略， 那么将不使用延迟。
Code examples:

初始化带有指定 hide选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置hide 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var hide = $( ".selector" ).dialog( "option", "hide" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

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

maxHeightType: Number

Default:  false
dialog可以调整的最大高度，以像素为单位。
Code examples:

初始化带有指定 maxHeight选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置maxHeight 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "maxHeight", 600 );

maxWidthType: Number

Default:  false
dialog可以调整的最大宽度，以像素为单位。
Code examples:

初始化带有指定 maxWidth选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置maxWidth 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "maxWidth", 600 );

minHeightType: Number

Default:  150
dialog可以调整的最小高度，以像素为单位。
Code examples:

初始化带有指定 minHeight选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置minHeight 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "minHeight", 200 );

minWidthType: Number

Default:  150
dialog可以调整的最小宽度，以像素为单位。
Code examples:

初始化带有指定 minWidth选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置minWidth 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "minWidth", 200 );

modalType: Boolean

Default:  false
如果设置为 true，该dialog将会有遮罩层; 页面上的其他项目将被禁用， 即，不能交互。 遮罩层创建对话框下方，但高于其它页面元素。
Code examples:

初始化带有指定 modal选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置modal 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var modal = $( ".selector" ).dialog( "option", "modal" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "modal", true );

positionType: Object or String or Array

Default:  { my: "center", at: "center", of: window }

指定dialog显示的位置。该dialog将会处理冲突  ，使得尽可能多的dialog尽可能地可见。

注意: 不赞成使用 String 和 Array 格式。

支持多个类型：
  • Object: 确定dialog打开时的位置。  of选项默认为窗口， 但您可以指定其他元素定位。 你可以参考jQuery UI Position实用工具，了解各种选项的更多细节。
  • String:一个字符串，表示可视区内的位置。可能的值："center", "left", "right", "top", "bottom".
  • Array: 一个包含相对于可见区域左上角x, y偏移坐标（单位为像素） 的数组， 或 一个可能值的字符串名称。
Code examples:

初始化带有指定 position选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置position 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var position = $( ".selector" ).dialog( "option", "position" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

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

resizableType: Boolean

Default:  true
如果设置为 true， 那么dialog允许调整大小。需要包含 jQuery UI Resizable widget。
Code examples:

初始化带有指定 resizable选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置resizable 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var resizable = $( ".selector" ).dialog( "option", "resizable" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "resizable", false );

showType: Boolean or Number or String or Object

Default:  null
dialog打开（显示）时的动画效果。
支持多个类型：
  • Boolean: 当设置为false， 将不使用动画效果，该dialog会立即被隐藏。 如果设置为true， 该dialog将会以默认的持续时间和默认的效果淡出。
  • Number: 该dialog将以指定的时间和默认的效果淡出。
  • String: 该dialog将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称， 如"slideUp"， 或一个 jQuery UI 效果的名称， 如"fold"。 在这两种情况下，将使用默认持续时间和默认的动画效果。
  • Object: 如果该值是一个对象， 那么 effect, delay, duration, 和easing可能要提供。  如果 effect 属性包含一个jQuery方法的名称， 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 ， 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration持续时间或easing属性被省略， 那么默认值将被使用。 如果effect被省略， 那么"fadeOut" 将被使用。如果delay被省略， 那么将不使用延迟。
Code examples:

初始化带有指定 show选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置show 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var show = $( ".selector" ).dialog( "option", "show" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

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

titleType: String

Default:  null
指定dialog的标题文字。 如果值为 null,那么该dialog 元素上的 title属性将被使用。
Code examples:

初始化带有指定 title选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置title 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var title = $( ".selector" ).dialog( "option", "title" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "title", "Dialog Title" );

widthType: Number

Default:  300
设置dialog的宽度（单位：像素）。
Code examples:

初始化带有指定 width选项的 dialog：

1 
       
       

        
        

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

在初始化后，获取或设置width 选项：

1
2
3
4
5 
       
       

        
        

         
         // getter
        
        

       
       

       
       

        
        

         
         var width = $( ".selector" ).dialog( "option", "width" );
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         // setter
        
        

       
       

       
       

        
        

         
         $( ".selector" ).dialog( "option", "width", 500 );

Methods

close()Returns: jQuery (plugin only)

关闭dialog.
  • 该方法不接受任何参数。
Code examples:

调用 close 方法：

1 
         
         

          
          

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

destroy()Returns: jQuery (plugin only)

完全移除 dialog 功能. 这将使元素返回到之前的初始化状态.
  • 该方法不接受任何参数。
Code examples:

调用 destroy 方法：

1 
         
         

          
          

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

isOpen()Returns: Boolean

确定 dialog 当前是否打开状态。
  • 该方法不接受任何参数。
Code examples:

调用 isOpen 方法：

1 
         
         

          
          

           
           var isOpen = $( ".selector" ).dialog( "isOpen" );

moveToTop()Returns: jQuery (plugin only)

移动dialog到所有dialog堆栈的顶部。（愚人码头注：理解为 z-index层级最高）
  • 该方法不接受任何参数。
Code examples:

调用 moveToTop 方法：

1 
         
         

          
          

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

open()Returns: jQuery (plugin only)

打开 dialog。
  • 该方法不接受任何参数。
Code examples:

调用 open 方法：

1 
         
         

          
          

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

option( optionName )Returns: Object

获取当前与指定的   optionName  关联的值。
  • optionName
    Type:   String
    要获取值的选项的名称。
Code examples:

调用该方法：

1 
         
         

          
          

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

option()Returns: PlainObject

获取一个包含键/值对的对象，键/值对表示当前 dialog 选项哈希。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

1 
         
         

          
          

           
           var options = $( ".selector" ).dialog( "option" );

option( optionName, value )Returns: jQuery (plugin only)

设置与指定的   optionName  关联的 dialog 选项的值。
  • optionName
    Type:   String
    要设置的选项的名称。
  • value
    Type:   Object
    要为选项设置的值。
Code examples:

调用该方法：

1 
         
         

          
          

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

option( options )Returns: jQuery (plugin only)

为 dialog 设置一个或多个选项。
  • options
    Type:   Object
    要设置的 option-value 对。
Code examples:

调用该方法：

1 
         
         

          
          

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

widget()Returns: jQuery

返回一个包含 生成包裹元素 的   jQuery  对象。
  • 该方法不接受任何参数。
Code examples:

调用 widget 方法：

1 
         
         

          
          

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

扩展点（Extension Points）

dialog小部件是widget factory构建的，并且可以扩展。 当扩展部件时， 你必须覆盖或添加新的行为到现有的方法。 下列方法被提供作为扩展点 用相同的API稳定性如上所列的plugin methods。 有关小部件扩展的更多信息， 请参阅使用Widget Factory 扩展小部件。

_allowInteraction( event )Returns: Boolean

带遮罩的对话框不允许用户与对话框下面元素进行交互。 这可能会对 不属于该dialog的子元素那些绝对定位的其他元素产生问题。   _allowInteraction()方法确定用户是否应被允许与给定的目标元素进行交互; 因此， 它可用于不属于该dialog的子元素白名单中的元素 但你希望用户能够使用。
Code examples:

允许Select2插件在遮罩对话框中使用。 _super()调用确保该对话框中的元素仍然可以交互。

1
2
3 
         
         

          
          

           
           _allowInteraction: function( event ) {
          
          

         
         

         
         

          
          

           
             return !!$( event.target ).is( ".select2-input" ) || this._super( event );
          
          

         
         

         
         

          
          

           
           }

Events

beforeClose( event, ui )Type: dialogbeforeclose

当dialog即将关闭时触发。 如果取消，dialog将不会关闭。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 beforeClose 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            beforeClose: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogbeforeclose 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );

close( event, ui )Type: dialogclose

当dialog关闭时触发。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 close 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            close: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogclose 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogclose", function( event, ui ) {} );

create( event, ui )Type: dialogcreate

在创建dialog时触发。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 create 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            create: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogcreate 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogcreate", function( event, ui ) {} );

drag( event, ui )Type: dialogdrag

在dialog正在被拖动时触发。
  • event
    Type:   Event
  • ui
    Type:   Object
    • position
      Type:   Object
      dialog当前的CSS position（位置）对象。
    • offset
      Type:   Object
      dialog当前的offset position（偏移位置）对象。
Code examples:

初始化带有指定 drag 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            drag: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogdrag 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogdrag", function( event, ui ) {} );

dragStart( event, ui )Type: dialogdragstart

当用户开始拖动dialog时触发。
  • event
    Type:   Event
  • ui
    Type:   Object
    • position
      Type:   Object
      dialog当前的CSS position（位置）对象。
    • offset
      Type:   Object
      dialog当前的offset position（偏移位置）对象。
Code examples:

初始化带有指定 dragStart 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            dragStart: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogdragstart 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );

dragStop( event, ui )Type: dialogdragstop

当dialog 停止拖动时触发。
  • event
    Type:   Event
  • ui
    Type:   Object
    • position
      Type:   Object
      dialog当前的CSS position（位置）对象。
    • offset
      Type:   Object
      dialog当前的offset position（偏移位置）对象。
Code examples:

初始化带有指定 dragStop 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            dragStop: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogdragstop 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );

focus( event, ui )Type: dialogfocus

当对话框获取焦点时触发此事件。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 focus 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            focus: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogfocus 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogfocus", function( event, ui ) {} );

open( event, ui )Type: dialogopen

当对话框打开后，触发此事件。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 open 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            open: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogopen 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogopen", function( event, ui ) {} );

resize( event, ui )Type: dialogresize

当对话框大小改变时，触发此事件。
  • event
    Type:   Event
  • ui
    Type:   Object
    • originalPosition
      Type:   Object
      对话框被调整大小 之前的CSS position（位置）对象 。
    • position
      Type:   Object
      对话框当前的CSS position（位置）对象。
    • originalSize
      Type:   Object
      对话框被调整大小 之前的size（尺寸）对象 。
    • size
      Type:   Object
      对话框当前的size（尺寸）对象。
Code examples:

初始化带有指定 resize 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            resize: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogresize 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogresize", function( event, ui ) {} );

resizeStart( event, ui )Type: dialogresizestart

当开始改变对话框大小时，触发此事件。
  • event
    Type:   Event
  • ui
    Type:   Object
    • originalPosition
      Type:   Object
      对话框被调整大小 之前的CSS position（位置）对象 。
    • position
      Type:   Object
      对话框当前的CSS position（位置）对象。
    • originalSize
      Type:   Object
      对话框被调整大小 之前的size（尺寸）对象 。
    • size
      Type:   Object
      对话框当前的size（尺寸）对象。
Code examples:

初始化带有指定 resizeStart 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            resizeStart: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogresizestart 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );

resizeStop( event, ui )Type: dialogresizestop

当对话框改变大小后，触发此事件。
  • event
    Type:   Event
  • ui
    Type:   Object
    • originalPosition
      Type:   Object
      对话框被调整大小 之前的CSS position（位置）对象 。
    • position
      Type:   Object
      对话框当前的CSS position（位置）对象。
    • originalSize
      Type:   Object
      对话框被调整大小 之前的size（尺寸）对象 。
    • size
      Type:   Object
      对话框当前的size（尺寸）对象。
Code examples:

初始化带有指定 resizeStop 回调的 dialog：

1
2
3 
        
        

         
         

          
          $( ".selector" ).dialog({
         
         

        
        

        
        

         
         

          
            resizeStop: function( event, ui ) {}
         
         

        
        

        
        

         
         

          
          });

绑定一个事件监听器到 dialogresizestop 事件：

1 
        
        

         
         

          
          $( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );

Example:

一个简单的 jQuery UI 对话框（Dialog）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 
       
       

        
        

         
         <!doctype html>
        
        

       
       

       
       

        
        

         
         <html lang="en">
        
        

       
       

       
       

        
        

         
         <head>
        
        

       
       

       
       

        
        

         
           <meta charset="utf-8">
        
        

       
       

       
       

        
        

         
           <title>dialog demo</title>
        
        

       
       

       
       

        
        

         
           <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        
        

       
       

       
       

        
        

         
           <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        
        

       
       

       
       

        
        

         
           <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        
        

       
       

       
       

        
        

         
         </head>
        
        

       
       

       
       

        
        

         
         <body>
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         <button id="opener">open the dialog</button>
        
        

       
       

       
       

        
        

         
         <div id="dialog" title="Dialog Title">I'm a dialog</div>
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         <script>
        
        

       
       

       
       

        
        

         
         $( "#dialog" ).dialog({ autoOpen: false });
        
        

       
       

       
       

        
        

         
         $( "#opener" ).click(function() {
        
        

       
       

       
       

        
        

         
           $( "#dialog" ).dialog( "open" );
        
        

       
       

       
       

        
        

         
         });
        
        

       
       

       
       

        
        

         
         </script>
        
        

       
       

       
       

        
        

         
          
        
        

       
       

       
       

        
        

         
         </body>
        
        

       
       

       
       

        
        

         
         </html>
Demo:





乐乐_120
关注
专栏目录
Jquery UI dialog 详解 (中文)
weixin_34413103的博客
06-08 2205
1 属性 1.11 autoOpen ，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。 1.12 初始化例：请注意，$('.selector')是dialog 的类名，在本例中.selector=#dialoag,以后不再说明。 $('.se...
DialogApi
02-15
此加载项是Office加载项的Dialog Api双向消息传递的示例 家长方代码： Office.context.ui.displayDialogAsync（“ ”，{高度：80，宽度：50，requireHTTPS：true，alertBeforeOpen：false}，launchDialogCallback）; 函数launchDialogCallback（asyncResult）{if（asyncResult.status ==“ succeeded”）{_dialog = asyncResult.value; _dialog.messageChild（“ Hello”）; } else {console.log（asyncResult.error.message）; }} 儿童副代码： Office.context.ui.addHandlerAsync（Office.E
jQuery Dialog API (一)
zhiheng`s blog
01-06 2464
jQuery dialog API
jQuery DialogExtend 插件使用教程
最新发布
gitblog_00433的博客
08-26 238
jQuery DialogExtend 插件使用教程 jquery-dialogextendjQuery DialogExtend Plugin - Maximize and Minimize Buttons for UI Dialog项目地址:https://gitcode.com/gh_mirrors/jq/jquery-dialogextend 1. 项目的目录结构及介绍 jQuery D...
lhgdialog
贝木泥舟的专栏
02-25 787
在页面head引入lhgdialog(如果项目采用jQuery作为框架，则引用jQuery的库)。 配置全局默认参数(可选): (function(config){      config['extendDrag'] = true; // 注意，此配置参数只能在这里使用全局配置，在调用窗口的传参数使用无效      config['lock'] = true;   
API分析——Jquery UI Dialog
weixin_30426957的博客
03-28 100
1.阅读API文档的一般方法？ 通常地， API由三部分构成：属性、方法、事件。 属性表示参数配置，作为一个组件的微调，或者功能的开启与关闭； 方法表示组件能够发生的动作，或者组件的状态监测； 事件表示触发，即提供一个观测点，当触碰到观测点时，将产生通知或函数回调； 这三类几乎覆盖了可能的用户动作、数据传递。 2.如何看Jquery UI Dialo...
jquery dialog键盘事件代码
10-28
当需要在对话框中处理键盘事件，例如监听回车键（Enter）来执行某些操作时，我们可以通过 jQuery UI Dialog 提供的 API 来实现。具体来说，我们可以在对话框的打开（open）事件中添加事件监听器，以捕获和处理键盘...
jQuery EasyUI API 中文文档 – Dialog对话框
12-03
**jQuery EasyUI API 中文文档 - Dialog对话框** 在jQuery EasyUI框架中，Dialog对话框是一种常见的用户交互组件，它扩展了$.fn.window.defaults，并通过$.fn.dialog.defaults重写了默认配置。Dialog主要用于显示...
JQuery Dialog
10-20
**jQuery Dialog 深度解析与应用** jQuery UI Dialog 是一个功能强大的组件，它提供了丰富的交互式对话框，常用于创建模态或非模态窗口，以显示警告、确认信息或者进行更复杂的用户交互。本篇文章将深入探讨jQuery ...
JQuery Dialog的内存泄露问题解决方法
10-29
JQuery Dialog组件在开发中是...正确使用JQuery提供的API，如.remove()，以及对Dialog进行适当的管理，可以有效地解决内存泄露问题。通过这些策略，可以确保即使在复杂的交互操作中，应用也能保持良好的性能和稳定性。
jQuery dialog对话框插件点击弹出对话框代码
10-04
jQuery dialog提供了一些API方法，用于控制对话框的行为： - **.dialog("open")**：打开对话框。 - **.dialog("close")**：关闭对话框。 - **.dialog("option", optionName, value)**：更改对话框的选项。 - **....
jquery.dialog.js 经典弹出框附案例代码
09-30
jquery.dialog.js 是jquery 最经典的弹出框插件，简单易用，亲测可用，附案例代码
QDialog的相关API函数
好好学习，天天向上
07-11 444
本文讲述了QDialog的相关API函数和相关示例
基于MUI实现的全局Dialog API
老司机的后备箱
08-31 625
以上就是本次分享的全部内容，其实仅从实现的难度和深度来看，这个 Demo 真没什么大不了的，所涉及到的基本也都是一些很基础的知识，如果看看源码，也能很轻易的发现大多数内容其实都是在做实用性不高的类型体操。那为什么我还写了这么长一篇文章并把它发出来呢？坦诚的讲，主要还是因为我觉得自己 2022 年上半年摆烂摆的有点太厉害了，甚至让我自己都不知不觉地陷入到了一种踌躇不前的心境里，等我稍微回过神来的时候，转眼间就过去了半年的时间。...
js 调 CDHtmlDialog API
weixin_30578677的博客
06-08 64
头文件中声明： DECLARE_DISPATCH_MAP() .c文件中加入 BEGIN_DISPATCH_MAP(CMyDlg, CDHtmlDialog) DISP_FUNCTION(CMyDlg,"ResizeDialog",ResizeDialog,VT_EMPTY,VTS_I4 VTS_I4) //红色，javascript中调用的函数名；黄色，c++文件中实现的函数名E...
AlertDialog 实用API及其示例
博客
05-22 829
本文将介绍常用AlertDialog Api及其常用AlertDialog示例 常用API 常用方法 方法定义 方法说明 setIcon(int iconId) 设置对话框的图标 setCancelable(boolean cancelable) 设置对话框是否可取消 setTitle(CharSequence title) 设置对话框的标题 setMessage(CharSequence message) 设置对话框主体内容 setAdapter(ListAdapter ad
jquery dialog 参数使用
xiaomin1991222的专栏
10-12 312
Jquery ui的dialog使用文档概述 一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标'×'。如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。 ·参数（名称 : 参数类型 : 默认值） autoOpen : Boolean : true 如果设置为true，则默认页面加...
jQuery UI 实例 - 对话框（Dialog）
unber的博客
04-10 2546
在一个交互覆盖层中打开内容。如需了解更多有关 dialog 部件的细节，请查看 API 文档。
html弹窗控件,jQuery自定义弹窗插件dialog.js(原创)
weixin_36251341的博客
06-05 1907
插件描述：一个轻量级的、可高度自定义的、可自动收集数据的弹窗对话框。更新时间：2020-08-3023:01:42更新说明：增加了一些新的配置项，大大丰富了功能：- easyClose： 点击遮罩层也可以关闭窗口,默认值false- afterInit：用于初始化后运行函数内置函数(新增内置函数)- clearAllData(id) 去除对应id的对话框里的所有数据，可用于提交成功后- mov...
jQuery EasyUI API与实战指南
"jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的组件，如 Accordion、DateBox、ComboBox、Dialog、Messager、NumberBox、ValidateBox、Pagination、Window、Panel、Tabs、Tree、Layout 和 Datagrid，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值