在jQuery UI中调用resize事件

时间:2013-03-13 21:59:53

标签: javascript jquery 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像素。

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

感谢。

1 个答案:

答案 0 :(得分:0)

这个(更新的例子)会起作用吗? (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>