我有一个 div 元素,它是 jquery 可调整大小的。它还设置了Resize选项,因此其他元素可以同时调整大小。
我想要做的是以编程方式设置此可调整大小的 div 元素的大小,以便触发所有可调整大小的逻辑(特别是考虑到此也可调整大小选项)。
我怎样才能实现这一目标?
最佳答案
更新:自从我回答这个问题以来,jQuery UI 的内部结构似乎发生了巨大的变化,并且触发事件不再有效。
不再有直接的方法来触发事件,因为可调整大小的插件已经从根本上改变了。 It resizes as the mouse is dragged rather than syncing items up at the end 。这是通过监听内部 resize
来实现的。可调整大小的插件的传播事件 is now fired by the _mouseDrag
handler 。但这取决于一路上设置的变量,因此即使在内部触发也无济于事。
这意味着即使覆盖它充其量也是困惑的。我建议手动调整 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"
axis 假设您想在右下角调整大小 - 我选择这个是因为它是迄今为止最常见的场景,但您可以将其作为参数。- 我们稍微关注一下内部事件,但我有意使用尽可能少的内部实现细节,以便将来不太可能出现问题。
- 它绝对可能在 jQuery UI 的 future 版本中出现故障,我只是尽力将这种可能性降到最低。
You can play with it in action with a fiddle here和 the resizeBy
version here .
原始答案:
你可以这样做:
$(".selector").trigger("resize");
alsoResize
在内部将处理程序安装到 resize
事件,所以你只需要调用它:)
关于jquery - 如何以编程方式触发 jquery 可调整大小调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2523522/