如何触发jquery可编程调整大小的大小?

前端之家收集整理的这篇文章主要介绍了如何触发jquery可编程调整大小的大小?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div元素,这是jquery可调整大小。它还有Resize选项集,所以其他元素同时调整大小。

我想要做的是以这种方式设置这个可调整大小的div元素的大小,即所有可调整大小的逻辑被触发(尤其是考虑了这个Resize选项)。

我该如何实现呢?

解决方法

更新:看起来jQuery UI的内部结构已经发生了巨大的变化,因为我回答了这一点,并且触发事件不再起作用。

没有直接的方式来触发事件,因为可调整大小的插件已经根本改变了。 It resizes as the mouse is dragged rather than syncing items up at the end.这发生在它监听内部调整大小传播事件的可调整大小的插件,这是is now fired by the _mouseDrag handler.但它取决于变量设置的方式,所以只是射击,即使在内部也不会有帮助。

这意味着甚至超越它最多是凌乱的。我建议只要手动调整大小的resize元素直接,独立于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);
    }
});

这只是创建可调整大小的部件正在寻找并触发它们的鼠标事件。如果你想做一些像resize这样的事情,那将是一个更简单的结局,因为我们所关心的是三角洲:

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

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

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

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

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

这将像您立即将其拖动到该大小。当然这里有几个问题:

>“se”轴假设你想要右下角调整大小 – 我选择了这是因为它是迄今为止最常见的情况,但你可以使它成为一个参数。
>我们正在内部事件挂钩,但我有意使用尽可能少的内部实现细节,以便今后不太可能中断。
>在将来的jQuery UI版本中绝对可以打破,我只是尽量减少这种机会。

You can play with it in action with a fiddle herethe resizeBy version here

原来的答案:

你可以这样做:

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

也可以在内部调用resize事件调用resize事件,所以你只需要调用:)

猜你在找的jQuery相关文章