jquery - 如何在更改其内容后使用 Jquery UI 调整 div 的大小？

Question

我正在使用 Jquery UI 来允许用户调整带有视频播放器的 div 的大小。这是代码摘录:

<script type="text/javascript">
  $(function(){
  $("#stream").resizable({
  containment: "#content",
  minHeight: $('#content').height(),
  maxWidth: ($('#content').width() / 1.3)
  });

});
</script>

<div id="stream">
<!-- Flash video player stuff -->
</div>

当页面呈现时，这将按预期工作。问题是当我触发一个事件来更改“#stream”div 的内容时:

#('#stream').html(<--!Code for another video player-->);

执行此操作后，调整大小控件消失，即使我再次调用 $("#stream").resize() 似乎也不起作用。

我做错了什么或者我需要使用某种解决方法吗？

Answer 1

即使#content本身发生变化，小部件仍将在您创建时指定的参数下运行。您可以完全销毁小部件并重新创建它:

$("#stream").resizable("destroy").resizable({
    containment: "#content",
    minHeight: $("#content").height(),
    maxWidth: $("#content").width() / 1.3
});

或者，以更少的干扰，使用 option 方法来更新其操作参数:

$("#stream").resizable("option", {
    minHeight: $("#content").height(),
    maxWidth: $("#content").width() / 1.3
});