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

Question

我有一个div元素,使jquery Resizable.它还具有Resize选项集,因此其他元素可以同时调整大小.

我想要做的是,以这种方式以编程方式设置此Resizable div元素的大小,即触发所有Resizable逻辑(特别是考虑到此另外的Resize选项).

我怎样才能做到这一点？

Answer 1

更新:看起来jQuery UI的内部已经发生了巨大的变化,因为我回答了这个问题并且触发事件不再有效.

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

这意味着即使重写也至多是凌乱的.我建议只是手动调整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"轴是假设你想在右下角调整大小-我选择这个,因为它是迄今为止最常见的场景,但你可以只是使它成为一个参数.
• 我们稍微讨论了内部事件,但我有意使用尽可能少的内部实现细节,以便将来不太可能破解.
• 在jQuery UI的未来版本中它绝对可以打破,我只是尽量减少这种可能性.

您可以在行动中发挥它在这里小提琴和在resizeBy这里的版本.

原始答案:

你可以这样做:

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

alsoResize内部装配了resize事件的处理程序,所以你只需要调用:)

Answer 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是否具有东部和南部尺寸调整条。