jquery - 如何使用 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

您可以使用 ressized 中的事件 resize 并设置其中另一个 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/