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

How to trigger jquery Resizable resize programmatically?

提问by Dawid Ohia

I have a div element which is made jquery Resizable. It has alsoResize option set, so other elements resize simultaneously.

我有一个 div 元素，它使 jquery 可调整大小。它还具有调整大小选项集，因此其他元素会同时调整大小。

What I want to do, is to set size of this Resizable div element programmatically in such way, that all Resizable logic is triggered (especially this alsoResize option is taken into account).

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

How can I achieve that?

我怎样才能做到这一点？

回答by Nick Craver

Update:It looks like the internals of jQuery UI have changed dramatically since I answered this and firing the event no longer works.

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

There's no direct way to fire the event anymore because the resizable plugin has been fundamentally changed. It resizes as the mouse is draggedrather than syncing items up at the end. This happens by it listening for the internal resizepropagation event for resizable plugins which is now fired by the _mouseDraghandler. But it depends on variables set along the way, so just firing that even internally won't help.

不再有直接的方法来触发事件，因为可调整大小的插件已经从根本上改变了。它会随着鼠标被拖动而调整大小，而不是在最后同步项目。这是通过它侦听resize可调整大小的插件的内部传播事件来实现的，该事件现在由_mouseDrag处理程序触发。但这取决于沿途设置的变量，因此即使在内部触发也无济于事。

This means even overriding it is messy at best. I'd recommend just manually resizing the alsoResizeelements directly, independent of the UI widget altogether if that's possible.

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

But for fun let's say it isn't. The problem is that the internals of the plugin set various properties relating to previous and current mouse position in order to know how much to resize by. We can abuseuse that to add a method to the widget, like this:

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

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

This is just creating the mouse events that the resizablewidget is looking for and firing those. If you wanted to do something like resizeByit'd be an even simpler end since all we care about is the delta:

这只是创建resizable小部件正在寻找的鼠标事件并触发这些事件。如果您想做类似的事情，resizeBy那将是一个更简单的结果，因为我们只关心增量：

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

You'd call the $.widget()method after jQuery UI and before creating your .resizable()instances and they'll all have a resizeTomethod. That part doesn't change, it's just:

您将$.widget()在 jQuery UI 之后和创建.resizable()实例之前调用该方法，它们都会有一个resizeTo方法。那部分没有改变，只是：

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

Then to resize, you'd call that new resizeTomethod like this:

然后要调整大小，您可以resizeTo像这样调用该新方法：

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

This would act as if you instantly dragged it to that size. There are of course a few gotchas here:

这就像您立即将其拖动到该大小一样。当然这里有一些陷阱：

• The "se"axis is assuming you want resize by the bottom right - I picked this because it's by far the most common scenario, but you could just make it a parameter.
• We're hooking into the internal events a bit, but I'm intentionally using as few internal implementation details as possible, so that this is less likely to break in the future.
• It could absolutely break in future versions of jQuery UI, I've only tried to minimize the chances of that.

• 该"se"轴是假设你通过右下角要调整大小-我选择这个，因为它是迄今为止最常见的场景，但你可以只是使它成为一个参数。
• 我们正在与内部事件挂钩，但我有意使用尽可能少的内部实现细节，以便将来不太可能中断。
• 它绝对可能会在未来版本的 jQuery UI 中崩溃，我只是试图将这种可能性降到最低。

You can play with it in action with a fiddle hereand the resizeByversion here.

你可以在这里用小提琴和这里的resizeBy版本玩它。

---

---

Original answer:

原答案：

You can do this:

你可以这样做：

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

alsoResizeinternally rigs up a handler to the resizeevent, so you just need to invoke that :)

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

回答by Mika?l Mayer

You can trigger the bars programmatically. For example, to trigger the east-west resize event:

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

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

I am doing a 1px left followed by 1px right movement on the east bar handle. To perform a full size, you can target .ui-resizable-handle.ui-resizable-seif you have east and south resize bars.

我在东栏手柄上向左移动 1px，然后向右移动 1px。要执行完整尺寸，您可以定位.ui-resizable-handle.ui-resizable-se是否有东和南调整条。

回答by Victor

I needed the same thing for tests. Similarquestionshave only one promising answer https://stackoverflow.com/a/17099382/1235394, but it requires additional setup, so I ended with my own solution.

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

I have an element with resizable right edge

我有一个具有可调整大小的右边缘的元素

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

and I needed to trigger all callbacks during the test in order to resize all elements properly. The key part of test code:

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

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');

Of course this code is brittle and may break when widget implementation changes.

当然，这段代码很脆弱，当小部件实现更改时可能会中断。

回答by Sajjan Sarkar

Hack Disclaimer (tested on jQuery 1.12.4):

黑客免责声明（在 jQuery 1.12.4 上测试）：

This basically waits for the dialog to be opened and then increments by 1px(which forces the resize()event) and then decrements by 1px(to regain originalsize)

这基本上等待对话框打开，然后增加1px（强制resize()事件）然后减少1px（重新获得original大小）

just say this in the dialog openevent handler:

只需在对话框open事件处理程序中说：

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

note:

笔记：

This may not work with show effects (like fadeIn,slideDownetc) as the "resizer" code executes before the dialog is fully rendered.

这可能不适用于显示效果（如fadeIn,slideDown等），因为“调整器”代码在对话框完全呈现之前执行。

回答by Konstantin XFlash Stratigenas

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

And the same with the width.

宽度也一样。