jQuery resizable's alsoResize: How can I cut the growth ratio of the inner resize div's?
I've a resizable area the contains two areas that I also want resized side by side. The ratio of growth ho开发者_StackOverflowrizontally is 1:1 for each area, but since the two contained areas are side by side, the sum of their widths grows twice as fast as their container. How do I cut the horizontal growth of the two contained areas in half.
<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>
I see a couple of problems. First, you are putting realizable divs in a table. That seems to be a bit of a contradiction.
Second, alsoResize seems to resize the additional elements by the same number of pixels as the main resizable element, it does not resize them as a percentage as you might expect.
To solve this I:
- Removed the alsoResize
- Removed the table
- Left floated the child elements
- Relatively positioned the #resizable div
- Made the child divs' sizes percentage based.
This makes the children resize automatically, without alsoResize. Not sure if this will work in your case, but it seems like you should let the DOM handle the resizing when it can.
Example:
http://jsfiddle.net/JaPvZ/
Of course, it should be noted that this does not take care of the spacing around the child divs. That means that you could still potentially end up with some spacing you don't want.
加载中,请稍侯......
精彩评论