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本身发生更改，窗口小部件仍将在您创建时指定的参数下运行。您可以完全destroy小部件并重新创建它：

$("#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
});

Answer 2

您可以在#stream中添加其他元素，例如

<div id="stream"><div class="cnt"></div></div>

并通过调用

更新内容

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

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

2 个答案: