javascript - 在 jQuery UI 中调用调整大小事件

Question

我有一个已应用的 DIV：

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

现在，有时我想以编程方式将其设为 300 像素宽或 10 像素宽。我尝试了很多组合，但没有一个有效。一些更复杂的尝试如下所示：

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 像素。

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

谢谢。

Answer 1

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

<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>