如何使用jQuery和jQuery UI保持div的寬度相對於可調整大小的div？

Question

如何使用jQuery和jQuery UI保持div的寬度相對於可調整大小的div。我有以下代碼：

<div id="resizable" class="ui-widget-content"> 
    <h3 class="ui-widget-header">Resizable</h3> 
</div> 
<div id="auto-resize"> 
    <h3 class="ui-widget-header">Resize auto</h3> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     $("#resizable").resizable(); 
    }); 
</script> 

我如何才能讓「自動調整大小」 DIV一樣的「可調整大小的」 DIV，同時它會調整？

Answer 1

您可以從resizable使用事件resize並設置其他分區的大小，裏面有：

<div id="resizable" class="ui-widget-content"> 
    <h3 class="ui-widget-header">Resizable</h3> 
</div> 
<div id="auto-resize"> 
    <h3 class="ui-widget-header">Resize auto</h3> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     $("#resizable").resizable({ 
      resize: function(event, ui) { 
       $("#auto-resize").width(ui.size.width); 
       $("#auto-resize").height(ui.size.height); 
      } 
     }); 
    }); 
</script> 

的jsfiddle這裏：http://jsfiddle.net/m4dQ8/

Answer 2

有產生resize事件，所以你只需要做這樣的：

$("#resizable").resizable().on('resize', function(){ 
    $('#auto-resize').width($(this).width()); 
}); 

Demonstration

Answer 3

jQuery resize事件可以在這裏使用。 JsFiddle Example。

$(function() { 
    $("#resizable").resizable() 
    .resize(function() { 
     $("#auto-resize") 
      .height($(this).height()) 
      .width($(this).width()); 
    }); 
});