JQuery UI：有没有办法让 Resizable div 的高度在宽度变小时时变高？

Question

我有 2 个 div（myDiv1 和 myDiv2），它们位于另一个 div（otherDiv）中，该 div 最终位于 asp:TabPanel 中。我在 myDiv1 上使用 JQuery IU 的 Resizable 函数（可以在这里看到：http://jqueryui.com/demos/resizable/）。 myDiv1 只能按宽度调整大小。我的困境是当宽度缩短并且内容溢出底部时，div的高度不会调整大小。

<script type="text/javascript" language="javascript">
     $(document).ready(function () {
        $('#myDiv1').resizable({ handles: 'e' });
    });
 </script>

 <asp:TabPanel>
     <div id="otherDiv">
         <div id="myDiv1">
             ... Some Stuff ...
         </div>
         <div id="myDiv2">
             ... Some Other Stuff ...
         </div>
     </div>
 </asp:TabPanel>

大家有什么建议吗？

Answer 1

resize 事件可用于在用户调整元素大小时执行您自己的代码。从这里您可以计算宽度并修改高度。

$("something").resizable({
    // ...
    resize: function(event, ui){
        // do stuff here
    },
    // ...
});