jQuery resizable的alsoResize：如何削減內部resize div的增長率？

我有一個可調整大小的區域，包含兩個我也想並排調整大小的區域。每個區域的水平增長率爲1：1，但由於兩個區域並排排列，所以它們的寬度總和增長的速度是其容器的兩倍。我如何將這兩個包含區域的水平增長減半。jQuery resizable的alsoResize：如何削減內部resize div的增長率？

<html> 
<head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css"/> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
</head> 
<body> 
<style> 
    #resizable { background-position: top left; } 
    #resizable { width: 300px; height: 120px; padding: 0.5em; } 
    #also1, #also2 { width: 75px; height: 60px; padding: 0.5em; } 
    #resizable h3, #also1 h3 , #also2 h3 { text-align: center; margin: 0; } 
    #also1, #also2 { margin-top: 1em; } 
</style> 
<script> 
    $(function() { 
    $("#resizable").resizable({ 
     alsoResize: "#also1,#also2" 
    }); 
    }); 
</script> 
<div id="resizable" class="ui-widget-header"> 
    <h3 class="ui-state-active">Resize</h3> 
    <table> 
    <tr> 
     <td> 
     <div id="also1" class="ui-widget-content"> 
      <h3 class="ui-widget-header">also one</h3> 
     </div> 
     </td> 
     <td> 
     <div id="also2" class="ui-widget-content"> 
      <h3 class="ui-widget-header">also two</h3> 
     </div> 
     </td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

來源

2010-12-01 dacracot

-1

我看到一些問題。首先，你在桌子上放置可實現的div。這似乎有點矛盾。其次，alsoResize似乎將其他元素的大小調整爲與主要可調整大小的元素相同的像素數量，但它不會像您期望的那樣將其大小調整爲百分比。

爲了解決這個問題我：

刪除了alsoResize
刪除表
左浮動的子元素
相對定位的#resizable DIV
取得了孩子的div大小基於百分比。

這使得孩子自動調整大小，沒有alsoResize。不知道這是否會在你的情況下工作，但似乎你應該讓DOM處理調整大小，當它可以。

例子：

http://jsfiddle.net/JaPvZ/

當然，應該指出的是，這並不需要在孩子身邊的div間距的照顧。這意味着你仍然有可能以一些你不想要的間距結束。

來源

2010-12-01 00:50:26

我也需要1和also2保持並排，因此表。我還需要他們保持與可調整大小塊邊緣的緊密聯繫。但是，謝謝。 – dacracot 2010-12-01 16:09:49

jQuery resizable的alsoResize：如何削減內部resize div的增長率？

回答

相關問題