Question

我有一个div元素，它是jquery Resizable。它还具有重置选项集，因此其他元素可以同时调整大小。

我想要做的是，以这种方式以编程方式设置此Resizable div元素的大小，触发所有可调整大小的逻辑（特别是考虑到此还考虑了theResize选项）。

我怎样才能做到这一点？

Answer 1

更新：看起来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传播事件。但它取决于沿途设置的变量，因此即使在内部触发它也无济于事。

这意味着即使重写也至多是凌乱的。我建议您直接手动调整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之后和创建$.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 here和the resizeBy version here。

原始答案：

你可以这样做：

$(".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。

Answer 3

我需要同样的测试。 Similar questions只有一个有希望的答案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');

当然，这个代码很脆弱，并且可能会在小部件实现发生变化时中断。

Answer 4

Hack免责声明（在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);

<强> 注意：的

这可能不适用于show效果（如fadeIn,slideDown等），因为“resizer”代码在对话框完全呈现之前执行。

Answer 5

$(".yourWindow").each(function(e) {
    $(this).height($(this).find(".yourContent").height());
});

与宽度相同。

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

5 个答案: