jQuery UI 可调整大小的停止事件

jQuery UI是一种基于 Web 的技术，由使用 jQuery、JavaScript 库实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 是为网页构建 UI 界面的最佳工具。它还可以用于构建高度交互的 Web 应用程序，或者可以用于轻松添加小部件。

在本文中，我们将学习jQuery Mobile 可调整大小的停止事件。此事件在调整大小操作结束时触发

句法：

使用指定的创建回调初始化可折叠。

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

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

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

参数：这些是接受的以下参数：

• event：此事件在调整大小操作结束时触发。
• ui：此参数是具有以下给定选项的对象类型。
  • helper：此参数是表示正在调整大小的助手的 jQuery 对象。
  • element：此参数是表示要调整大小的元素的 jQuery 对象。
  • size：此参数是辅助对象的当前大小，表示为 { width, height }。
  • position：此参数是辅助对象的当前位置，表示为 { top, left }。
  • originalPosition：在调整大小之前，辅助对象的原始位置表示为 { top, left }。
  • originalSize：在调整大小之前，对象的原始大小表示为 { width, height }。
  • originalElement：这个参数是被包裹之前的原始元素。

CDN 链接：添加您在项目中需要的以下 jQuery Mobile 脚本。

示例：此示例描述了jQuery UI 可调整大小停止事件的使用。

HTML

    
    
    
    
    
        h1 {
            color: green;
        }
  
        .container {
            width: 320px;
        }
  
        #resizable-div {
            width: 300px;
            height: 150px;
            text-align: center;
            border: 2px solid black;
        }
    
    
        $(function () {
            $( "#resizable-div" ).resizable({
                stop: function( event, ui ) {
                    $("#gfg").html("Resizable Widget has been Stopped");
                }
            });
        });
  
        $(function () {
            $("#resizable-div").resizable();
            $("#resizable-div").resizable('enable');
        });
    


    
        GeeksforGeeks
        jQuery UI Resizable stop Events
  
        
            
                
            
        
        
        
    

输出：

jQuery UI 可调整大小的停止事件

参考资料： https://api.jqueryui.com/resizable/#event-stop