jRésize de jQuery redimensionnable: Comment est-ce que je peux couper le taux de croissance des div divisent intérieurs?

J'ai une zone redimensionnable qui contient deux zones que je veux également redimensionnées côte à côte. Le rapport de croissance horizontal est de 1: 1 pour chaque zone, mais comme les deux zones contenues sont côte à côte, la somme de leurs largeurs croît deux fois plus vite que leur contenant. Comment couper la croissance horizontale des deux zones contenues de moitié.jRésize de jQuery redimensionnable: Comment est-ce que je peux couper le taux de croissance des div divisent intérieurs?

<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>

Source

2010-12-01 dacracot

-1

Je vois un couple de problèmes. D'abord, vous mettez des divs réalisables dans une table. Cela semble être un peu contradictoire. Deuxièmement, aussiResize semble redimensionner les éléments supplémentaires par le même nombre de pixels que l'élément redimensionnable principal, il ne les redimensionne pas en pourcentage comme vous pouvez vous y attendre.

Pour résoudre ce I:

Suppression de la alsoResize
Suppression de la table
gauche flottaient les éléments enfants
positionné relativement au #resizable div
Made tailles de l'enfant divs pourcentage basé.

Cela permet aux enfants de se redimensionner automatiquement, sans aussiResize. Je ne sais pas si cela fonctionnera dans votre cas, mais il semble que vous devriez laisser le DOM gérer le redimensionnement quand cela est possible.

Exemple:

http://jsfiddle.net/JaPvZ/

Bien sûr, il convient de noter que cela ne prend pas soin de l'espacement autour des divs enfants. Cela signifie que vous pourriez toujours vous retrouver avec un espacement que vous ne voulez pas.

Source

2010-12-01 00:50:26

Je dois aussi1 et aussi2 rester côte à côte, d'où la table. J'ai également besoin qu'ils restent étroitement liés au bord du bloc redimensionnable. Mais merci. – dacracot

Lequel de vos besoins ne correspond-il pas? Le seul qui casse est que lorsque vous faites l'élément redimensionnable trop petit, aussi2 va en dessous aussi1. Vous pouvez empêcher cela en définissant minWidth/minHeight. –

jRésize de jQuery redimensionnable: Comment est-ce que je peux couper le taux de croissance des div divisent intérieurs?

Répondre

Questions connexes