如何使用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 resizable並在其中設置另一個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({
            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());
});

示范

Answer 3

可以在此處使用jQuery resize事件。 JsFiddle示例 。

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