jQuery UI 可调整大小的创建事件

jQuery UI 由 GUI 小部件、视觉效果和使用 HTML、CSS 和 jQuery 实现的主题组成。 jQuery UI 非常适合为网页构建 UI 界面。创建可调整大小时会触发 jQuery UI Resizable create事件。

句法：

初始化可调整大小的创建事件。

$( ".selector" ).resizable({
 create: function( event, ui ) {}
});

• 将事件侦听器绑定到 resizecreate 事件。

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

参数：它接受一个有两个参数的回调函数。

• event：它接受事件类型值。
• ui：它接受对象类型值。 ui 对象可以为空，但用于与其他事件保持一致。

CDN 链接：首先，添加项目所需的 jQuery UI 脚本。

示例：此示例演示了 jQuery UI 可调整大小的创建事件。

HTML

  

    
    
    
    
    
    
    
        h1 {
            color: green;
        }
  
        #GFG {
            width: 150px;
            height: 150px;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    

  

    
        
            GeeksforGeeks
        
        jQuery UI Resizable create Events
        
        GeeksforGeeks
    
    
        $(document).ready(function () {
            $("#GFG").resizable({
                maxWidth: 300
            });
            $("#GFG").resizable({
                create: function (event, ui) { }
            });
            $("#GFG").on("resizecreate", function (event, ui) { });
            $("#log").html('Resizable has been created.');
        });
    

  

输出：

jQuery UI 可调整大小的创建事件

参考： https://api.jqueryui.com/resizable/#event-create