如何以编程方式触发jquery可调整大小的大小？

Question

我有一个div元素，使jquery Resizable。它也有Resize选项集，所以其他元素同时调整大小。

我想要做的是以这种方式编程设置此可调整大小的div元素的大小，以便触发所有可调整大小的逻辑（尤其是这也考虑到了这个也是Resize选项）。

我该如何做到这一点？

Answer 1

更新：它看起来像jQuery UI的内部发生了巨大的变化，因为我回答了这个问题，并且解雇了这个事件不再有效。

由于可调整大小的插件已经根本改变，没有直接的方法来触发事件了。 It resizes as the mouse is dragged rather than syncing items up at the end。这发生在它侦听内部resize传播事件的可调整大小的插件is now fired by the _mouseDrag handler。但它取决于沿途设置的变量，因此即使在内部开火也无济于事。

这意味着即使压倒一切也是凌乱。如果可能的话，我建议直接手动调整alsoResize元素的大小，而不依赖于UI小部件。

但为了好玩，让我们说它不是。问题在于插件的内部设置了与前一个和当前鼠标位置有关的各种属性，以便知道需要调整大小。我们可以滥用用它来添加方法到窗口小部件，像这样：

$.widget("ui.resizable", $.ui.resizable, { 
    resizeTo: function(newSize) { 
     var start = new $.Event("mousedown", { pageX: 0, pageY: 0 }); 
     this._mouseStart(start); 
     this.axis = 'se'; 
     var end = new $.Event("mouseup", { 
      pageX: newSize.width - this.originalSize.width, 
      pageY: newSize.height - this.originalSize.height 
     }); 
     this._mouseDrag(end); 
     this._mouseStop(end); 
    } 
}); 

这只是创造了resizable部件正在寻找和发射这些鼠标事件。如果你想这样做resizeBy它会是因为我们关心的一个更简单的到底是三角洲：

var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height }); 

你会调用$.widget()方法jQuery UI的后创建.resizable()情况下，他们前将会有一个resizeTo方法。这部分没有改变，它只是：

$(".selector").resizable({ alsoResize: ".other-selector" }); 

然后来调整，你会叫那新resizeTo方法是这样的：

$(".selector").resizable("resizeTo", { height: 100, width: 200 }); 

，如果你立刻拖它，这将采取行动尺寸。这里当然也有一些陷阱：

• 的"se"轴是假设你想在右下角调整大小 - 我选择这个，因为它是迄今为止最常见的场景，但你可以只是使它成为一个参数。
• 我们对内部事件有所了解，但我有意使用尽可能少的内部实现细节，以便将来不太可能发生这种情况。
• 它可能绝对会在未来版本的jQuery UI中突破，我只试图尽量减少这种可能性。

You can play with it in action with a fiddle here and the resizeBy version here。

---

原来的答复：

你可以这样做：

$(".selector").trigger("resize"); 

alsoResize内部钻机一下处理器的resize事件，所以你只需要调用一个:)

Answer 2

$(".yourWindow").each(function(e) { 
    $(this).height($(this).find(".yourContent").height()); 
}); 

而且与宽度相同。

Answer 3

我需要相同的东西进行测试。 Similarquestions只有一个有希望的答案https://stackoverflow.com/a/17099382/1235394，但它需要额外的设置，所以我用我自己的解决方案结束。

我有可调整大小的右边缘

$nameHeader.resizable({handles: 'e', ... }); 

的元件，我需要触发在测试期间所有的回调，以便正确地调整所有元素。测试代码的关键部分：

var $nameHeader = $list.find('.list-header .name'), 
    $nameCell = $list.find('.list-body .name'); 
ok($nameHeader.hasClass('ui-resizable'), 'Name header should be resizable'); 
equal($nameCell.outerWidth(), 300, 'Initial width of Name column'); 

// retrieve instance of resizable widget 
var instance = $nameHeader.data('ui-resizable'), 
    position = $nameHeader.position(), 
    width = $nameHeader.outerWidth(); 
ok(instance, 'Instance of resizable widget should exist'); 

// mouseover initializes instance.axis to 'e' 
instance._handles.trigger('mouseover'); 
// start dragging, fires `start` callback 
instance._mouseStart({pageX: position.left + width, pageY: position.top}); 
// drag 50px to the right, fires `resize` callback 
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top}); 
// stop dragging, fires `stop` callback 
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top}); 

// ensure width of linked element is changed after resizing 
equal($nameCell.outerWidth(), 350, 'Name column width should change'); 

当然这个代码是脆，可能会破坏时widget实现改变。

Answer 4

您可以通过编程方式触发横条。例如，触发东西resize事件：

var elem =... // Your ui-resizable element 
var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first(); 
var pageX = eastbar.offset().left; 
var pageY = eastbar.offset().top; 

(eastbar.trigger("mouseover") 
     .trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY }) 
     .trigger({ type: "mousemove", which: 1, pageX: pageX - 1, pageY: pageY }) 
     .trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY }) 
     .trigger({ type: "mouseup", which: 1, pageX: pageX, pageY: pageY })); 

我做1px的左侧，然后在东条柄1px的左右移动。 要执行完整大小，如果您有东部和南部大小调整栏，则可以将目标设定为.ui-resizable-handle.ui-resizable-se。

Answer 5

哈克声明（jQuery的1.12.4测试）：

这基本上等待要打开的对话框，然后通过1px（其迫使resize()事件），然后递减1px递增（以恢复original大小）

只想说，在对话框open事件处理程序：

$(this) 
.dialog("option","width",$(this).dialog("option","width")+1) 
.dialog("option","width",$(this).dialog("option","width")-1); 

注：

这可能与显示特效工作（如fadeIn,slideDown等）为“缩放工具”代码执行对话框被完全呈现之前。