jQuery UI 对话框 resize(event,ui) 事件

介绍

jQuery UI 是一套基于 jQuery 的用户界面插件集合，提供了丰富的 UI 组件和交互效果，其中包括对话框组件。对话框（Dialog）是一个常见的 UI 组件，常用于显示提示信息、执行操作确认等。对话框组件的 resize 事件是对话框大小改变时触发的事件。

语法

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

解释

• ".selector"：对话框的选择器。
• "dialogresize"：resize 事件的名称。
• function( event, ui ) {}：事件处理函数，event 是触发的事件对象，ui 包含了对话框的位置和大小信息。

示例

HTML 结构：

<div id="dialog"></div>

JavaScript 代码：

$(function() {
    $("#dialog").dialog({
        resize: function(event, ui) {
            console.log("dialog resize event");
            console.log(ui.size.width); // 对话框宽度
            console.log(ui.size.height); // 对话框高度
        }
    });
});

当对话框大小改变时，控制台会输出 resize 事件的信息，包括对话框的宽度和高度。

注意事项

• resize 事件仅在对话框被拖拽改变大小时触发，不包括对话框内容的改变。
• 在处理 resize 事件时，可以使用 ui.size.width 和 ui.size.height 获取对话框的宽度和高度。
• 如果需要在对话框大小改变时执行其他操作，可以在 resize 事件处理函数中编写相关代码。