Question

我想在文档调整大小时调整元素的大小。如果移动可拖动的div并导致文档滚动。我想调整像$("#page").css('height','120%');这样的元素。我在div的onresize事件中这样做。这是正确的方法吗？我应该在哪里做一个不同的事件吗？

这是HTML。

<div id="matting" onresize="resize_page();"> <!-- Begin page matting div --> 

  <div id="page"> <!-- Begin page div --> 

  </div> <!-- End page div --> 

</div> <!-- End page matting div --> 
<script type="text/javascript"> 
    function resize_page() { 
        alert ('resize_page'); 
        $("#page").css('height','120%'); 
    } 
</script>

Answer 1

你需要挂钩可拖动的stop回调：

$("#matting" ).resizable({
   stop: function(event, ui) { ...YOUR CODE... }
});

Answer 2

您可以在jQuery中挂接resize事件：http://api.jquery.com/resize/

更好的解决方案可能是对可拖动对象施加限制，使其无法移出界限并滚动页面。

Answer 3

我现在明白了，新代码使用plugin，允许将resize方法应用于每个元素。

http://jsfiddle.net/P9Ppb/ ＆LT;＆LT;调整窗口大小。

Answer 4

解决方案是将页面div的高度重置为父div（文档）的滚动高度。

     var page_height = $('#matting')[0].scrollHeight;
     $("#page").css('height',page_height);

在文档调整大小时调整元素大小

4 个答案: