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

Question

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

我想要做的是以编程方式设置此可调整大小的 div 元素的大小，以便触发所有可调整大小的逻辑(特别是考虑到此也可调整大小选项)。

我怎样才能实现这一目标？

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" axis 假设您想在右下角调整大小 - 我选择这个是因为它是迄今为止最常见的场景，但您可以将其作为参数。
• 我们稍微关注一下内部事件，但我有意使用尽可能少的内部实现细节，以便将来不太可能出现问题。
• 它绝对可能在 jQuery UI 的 future 版本中出现故障，我只是尽力将这种可能性降到最低。

You can play with it in action with a fiddle here和 the resizeBy version here .

<小时/>

原始答案:

你可以这样做:

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

alsoResize在内部将处理程序安装到 resize事件，所以你只需要调用它:)