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

问题描述

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

我想做的是，以编程方式设置此Resizable div元素的大小，以触发所有Resizable逻辑(尤其是考虑了AlsoResize选项).

我该如何实现?

解决方案

更新:自从我回答并触发事件不再起作用以来，jQuery UI的内部看起来发生了巨大变化. /p>

由于可调整大小的插件已从根本上进行了更改，因此不再有直接触发事件的方法. 在拖动鼠标时调整的大小而不是最后同步项目.发生这种情况的原因是，它监听可调整大小的插件的内部resize传播事件，该事件_mouseDrag处理程序会触发"noreferrer>.但这取决于过程中设置的变量，因此即使内部触发也无济于事.

这意味着即使重写它也充其量是混乱的.如果可能的话，我建议直接直接手动调整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 });

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

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

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

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

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

• "se"轴假定您想按右下角调整大小-之所以选择它，是因为这是迄今为止最常见的情况，但是您可以将其设置为参数.
• 我们会涉及一些内部事件，但是我故意使用尽可能少的内部实现细节，以免将来出现这种情况.
• 在将来的jQuery UI版本中，它可能会完全中断，我只是试图将这种可能性降到最低.

您可以在此处与小提琴配合使用和

alsoResize在内部将处理程序绑定到resize事件，因此您只需要调用它即可:)

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

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?

解决方案

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

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.

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.

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

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

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

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:

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

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

---

Original answer:

You can do this:

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

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

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