如何在JQuery Resizable停止后获得宽度和高度？

Question

使用JQuery UI Resizable调整div /元素的大小后，有没有办法获得它的大小？

Answer 1

$( ".selector" ).resizable({
    stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    }
});

Answer 2

$( "#resizable" ).resizable({

    stop: function( event, ui ) {

        height = $("#resizable").height(); 

        width = $("#resizable").width(); 

    } 
});

Answer 3

您始终可以在jQuery元素上使用height()和width()

Answer 4

在resizable的init对象中，为resizestop事件定义一个处理程序，然后在那里检查大小。

$( ".selector" ).resizable({
   stop: function(event, ui) { ... }
     // not 100% sure it'll be event.target that you want,
     // inspect in console to double-check
     var width = $(event.target).width();
     var height = $(event.target).height();
     // do stuff with width & height
});

Answer 5

为'stop'事件添加处理程序。

$("#element").resizable({
   stop: function(event, ui) {
      var x = $(event.target).width();
      ...
   }
});

您还可以绑定到 resizestop 。

http://jqueryui.com/demos/resizable/#event-stop