在jQuery UI中调用resize事件(Call resize event in jQuery UI)

在jQuery UI中调用resize事件(Call resize event in jQuery UI)

我有一个我应用的DIV：

$(mydiv).resizable({handles: "w", maxWidth: 300, minWidth: 10});

现在，我有时会以编程方式将其设为300 px或10 px。 我尝试了很多组合，但都没有效果。 一些更复杂的尝试看起来像：

var my_event = new jQuery.Event("resize"); my_event.offsetX = my_event.clientX = my_event.pageX = $(window).width() - 300; $(mydiv).trigger(my_event);

DIV位于页面的右边缘，因此我的鼠标距离右边缘为300像素。

这显然是错误的方法。 什么是正确的方法？

谢谢。

I have a DIV to which I've applied:

$(mydiv).resizable({handles: "w", maxWidth: 300, minWidth: 10});

Now, I'd like, sometimes, to make it either 300 px wide or 10 px wide programatically. I've tried many combinations, but none work. Some of the more convoluted attempts look like:

var my_event = new jQuery.Event("resize"); my_event.offsetX = my_event.clientX = my_event.pageX = $(window).width() - 300; $(mydiv).trigger(my_event);

The DIV is on the right edge of the page, so me mouse would be 300 px from the right edge.

This is very obviously the wrong way to go. What's the right way?

Thanks.

最满意答案

这个（更新的例子）会起作用吗？ （ 演示 ）

<div id="WindowA" class='Window'>I'm re-sizeale</div> <div id="WindowB" class='Window'>I'm not re-sizeale</div> <button id="Resize">Reset Size</button> <script> var windowA = $('#WindowA'), windowB = $('#WindowB'); windowA.bind({ resize : function(event,ui) { windowB.css({ "width": windowA.width() + "px", "height": windowA.height() + "px" }); } }).resizable(); $('#Resize').on('click', function () { windowA.css({ "width": "150px", "height": "150px" }).trigger('resize'); }); </script> <style> .Window { width: 150px; height: 150px; } #WindowA { background-image: url(http://placekitten.com/200/300); } #WindowB { background-image: url(http://placekitten.com/g/200/300); } </style>

Would this (updated example) work? (demo)

<div id="WindowA" class='Window'>I'm re-sizeale</div> <div id="WindowB" class='Window'>I'm not re-sizeale</div> <button id="Resize">Reset Size</button> <script> var windowA = $('#WindowA'), windowB = $('#WindowB'); windowA.bind({ resize : function(event,ui) { windowB.css({ "width": windowA.width() + "px", "height": windowA.height() + "px" }); } }).resizable(); $('#Resize').on('click', function () { windowA.css({ "width": "150px", "height": "150px" }).trigger('resize'); }); </script> <style> .Window { width: 150px; height: 150px; } #WindowA { background-image: url(http://placekitten.com/200/300); } #WindowB { background-image: url(http://placekitten.com/g/200/300); } </style>