我有一个 div 元素，它使 jquery 可调整大小。它还设置了调整大小选项，因此其他元素同时调整大小。
我想要做的是以编程方式设置这个 Resizable div 元素的大小，以触发所有 Resizable 逻辑（特别是考虑到这个 alsoResize 选项）。
我怎样才能做到这一点？
问问题
29079 次
5 回答
28
更新：自从我回答这个问题并且触发事件不再起作用后，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事件设置了一个处理程序，所以你只需要调用它:)
于 2010-03-26T13:58:58.040 回答
5
您可以以编程方式触发条形图。例如，要触发东西向调整大小事件：
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是否有东和南调整大小条。
于 2014-11-12T15:20:08.123 回答
1
我需要同样的东西进行测试。类似的 问题只有一个有希望的答案https://stackoverflow.com/a/17099382/1235394，但它需要额外的设置，所以我以自己的解决方案结束。
我有一个右边缘可调整大小的元素
$nameHeader.resizable({handles: 'e', ... });
我需要在测试期间触发所有回调，以便正确调整所有元素的大小。测试代码的关键部分：
var $nameHeader = $list.find('.list-header .name'),
$nameCell = $list.find('.list-body .name');
ok($nameHeader.hasClass('ui-resizable'), 'Name header should be resizable');
equal($nameCell.outerWidth(), 300, 'Initial width of Name column');
// retrieve instance of resizable widget
var instance = $nameHeader.data('ui-resizable'),
position = $nameHeader.position(),
width = $nameHeader.outerWidth();
ok(instance, 'Instance of resizable widget should exist');
// mouseover initializes instance.axis to 'e'
instance._handles.trigger('mouseover');
// start dragging, fires `start` callback
instance._mouseStart({pageX: position.left + width, pageY: position.top});
// drag 50px to the right, fires `resize` callback
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top});
// stop dragging, fires `stop` callback
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top});
// ensure width of linked element is changed after resizing
equal($nameCell.outerWidth(), 350, 'Name column width should change');
当然，这段代码很脆弱，当小部件实现发生变化时可能会中断。
于 2014-02-19T16:32:41.463 回答
0
黑客免责声明（在 jQuery 1.12.4 上测试）：
这基本上等待对话框打开，然后递增1px（强制resize()事件），然后递减1px（重新获得original大小）
只需在对话框open事件处理程序中这样说：
$(this)
.dialog("option","width",$(this).dialog("option","width")+1)
.dialog("option","width",$(this).dialog("option","width")-1);
笔记：
这可能不适用于显示效果（如fadeIn,slideDown等），因为“调整大小”代码在对话框完全呈现之前执行。
于 2017-02-23T16:00:56.723 回答
-6
$(".yourWindow").each(function(e) {
$(this).height($(this).find(".yourContent").height());
});
与宽度相同。
于 2013-04-25T13:18:58.870 回答