如何以编程方式触发 jquery Resizable 调整大小? [英] How to trigger jquery Resizable resize programmatically?

问题描述

我有一个 div 元素，它使 jquery 可调整大小.它还设置了调整大小选项，因此其他元素会同时调整大小.

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

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

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).

我怎样才能做到这一点?

How can I achieve that?

推荐答案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(".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:

• "se" 轴假设您想在右下角调整大小 - 我选择这个是因为这是迄今为止最常见的情况，但您可以将其设为参数.
• 我们正在与内部事件挂钩，但我有意使用尽可能少的内部实现细节，以便将来不太可能破坏.
• 它绝对可能会在未来版本的 jQuery UI 中崩溃，我只是尽量减少这种可能性.

• 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.

你可以在这里用小提琴演奏它 和 这里的 resizeBy 版本.

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

原答案:

你可以这样做:

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

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

alsoResize internally rigs up a handler to the resize event, so you just need to invoke that :)

这篇关于如何以编程方式触发 jquery Resizable 调整大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！