如何在更改内容后使用Jquery UI调整div的大小？ [英] How to resize a div with Jquery UI after changing its contents?

问题描述

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

I'm using Jquery UI to allow the user to resize a div with a video player in it. This is a excerpt of the code:

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

这在呈现页面时按预期工作。问题是当我触发一个事件，改变＃streamdiv的内容时：

This works as expected when the page is rendered. The problem is when I trigger an event that changes the contents of the "#stream" div with:

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

执行此操作后，调整大小控件将消失，即使我调用 $（ #stream）。resize（）再次似乎不起作用。

After doing this the resize controls disappear and even if I invoke $("#stream").resize() again is does not seem to work.

我做错了什么或我是否需要使用一些一种解决方法？

Am I doing something wrong or do I need to use some sort of work around?

推荐答案

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

The widget will still operate under the parameters you specified on creation, even if #content itself changes. You can either completely destroy the widget and recreate it:

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

或者，不那么干扰，使用选项更新其运行参数的方法：

Or, less intrusively, use the option method to update its operating parameters:

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

这篇关于如何在更改内容后使用Jquery UI调整div的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！