如何以编程方式触发jquery Resizable resize？答案

【问题标题】：How to trigger jquery Resizable resize programmatically?如何以编程方式触发jquery Resizable resize？
【发布时间】：2010-03-26 13:26:47
【问题描述】：

我有一个 div 元素，它是 jquery Resizable 的。它还设置了调整大小选项，因此其他元素同时调整大小。

我想要做的，是以编程方式设置这个 Resizable div 元素的大小，以触发所有 Resizable 逻辑（特别是考虑到这个 alsoResize 选项）。

我怎样才能做到这一点？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-resizable

【解决方案1】：

更新：自从我回答这个问题后，jQuery UI 的内部似乎发生了巨大变化，并且触发事件不再有效。

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

这意味着即使覆盖它也充其量是混乱的。我建议直接手动调整 alsoResize 元素的大小，如果可能的话，完全独立于 UI 小部件。

但为了好玩，我们说它不是。问题是插件的内部设置了与以前和当前鼠标位置相关的各种属性，以便知道要调整多少。我们可以 ~~abuse~~ 使用它向小部件添加方法，如下所示：

$.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 });

您将在 jQuery UI 之后和创建 .resizable() 实例之前调用 $.widget() 方法，它们都会有一个 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 和 the resizeBy version here。

原答案：

你可以这样做：

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

alsoResize 在内部为resize 事件设置了一个处理程序，所以你只需要调用它:)

【讨论】：

哇，这是一个很好的了解方法。您还可以触发任何其他事件类型，例如“dialogresizestop”。
我没有看到那里指定的任何大小或距离参数，请问你是怎么做到的？
它不起作用。问题是“如何触发 Resizable resize”，但您的变体会触发标准 javascript resize 事件。
@Webars - 这是它正在监听的事件，触发事件会触发绑定到该事件的处理程序。
$(window).trigger('resize') 在 chrome 中对我不起作用 - 这应该可以工作，因为不同的选择器，如 $('body') 工作..跨度>

【解决方案2】：

您可以通过编程方式触发条形图。例如触发东西向调整大小事件：

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。

【讨论】：

谢谢，正是我需要的！

【解决方案3】：

我需要同样的东西来进行测试。 Similar questions 只有一个有希望的答案 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');

当然，这段代码很脆弱，当小部件实现发生变化时可能会中断。

【讨论】：

【解决方案4】：

免责声明（在 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 等），因为“调整大小”代码在对话框完全呈现之前执行。

【讨论】：

【解决方案5】：

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

宽度也一样。

【讨论】：