如何以编程方式触发jquery Resizable resize？
我有一个div元素，使jquery Resizable。 它还具有Resize选项集，因此其他元素可以同时resize。
我想要做的是，以这种方式以编程方式设置此Resizable div元素的大小，触发所有可resize的逻辑（特别是考虑到此还使用了Resize选项）。
我怎样才能做到这一点？
更新：看起来jQuery UI的内部已经发生了巨大的变化，因为我回答了这个问题并解雇了该事件。
由于可resize的插件已经从根本上改变，因此没有直接的方法可以解雇该事件。 它会在拖动鼠标时resize，而不是在最后同步项目 。 这是因为它监听可resize的插件的内部resize传播事件， 现在由_mouseDrag处理程序触发 。 但它取决于沿途设置的变量，因此即使在内部触发也无济于事。
这意味着即使重写也至多是凌乱的。 我建议直接手动调整alsoResize元素的大小，如果可能的话，完全独立于UI小部件。
但是为了好玩，让我们说它不是。 问题是插件的内部设置了与先前和当前鼠标位置相关的各种属性，以便知道resize的程度。 我们可以滥用用于向窗口小部件添加方法，如下所示：
$.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这样的事情，那就更简单了，因为我们所关心的只是delta：
var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height });
你可以在jQuery UI之后和创建.resizable()实例之前调用$.widget()方法，它们都有resizeTo方法。 那部分不会改变，只是：
$(".selector").resizable({ alsoResize: ".other-selector" });
然后resize，你会调用这个新的resizeTo方法：
$(".selector").resizable("resizeTo", { height: 100, width: 200 });
这就好像你立即将它拖到那个大小。 当然有一些陷阱：
-
"se"轴假设您希望通过右下角resize – 我之所以选择它是因为它是迄今为止最常见的场景，但您可以将其作为参数。 - 我们正在深入研究内部事件，但我有意使用尽可能少的内部实现细节，以便将来不太可能破解。
- 在jQuery UI的未来版本中它绝对可以打破，我只是尽量减少这种可能性。
您可以在这里使用小提琴和resizeBy版本 来玩它 。
原始答案：
你可以这样做：
$(".selector").trigger("resize");
alsoResize内部为resize事件alsoResize了一个处理程序，所以你只需要调用它:)
您可以通过编程方式触发条形图。 例如，要触发东西向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右移动。 要执行完整大小，如果您有东西南resize条，则可以定位.ui-resizable-handle.ui-resizable-se 。
我需要同样的测试。 类似的 问题只有一个有希望的答案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实现发生变化时可能会中断。
Hack免责声明（在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);
注意：
这可能无法与show效果（如fadeIn,slideDown等）一起使用，因为“ fadeIn,slideDown ”代码在对话框完全呈现之前执行。
$(".yourWindow").each(function(e) { $(this).height($(this).find(".yourContent").height()); });
和宽度相同。