我有这个代码:
<table>
<tr>
<td id="parent">
<div id="child"></div>
</td>
</tr>
</table>
我的JavaScript代码:
$('#child' ).resizable({
animate: true,
helper: '.ui-resizable-helper',
maxWidth: 500,
maxHeight: 500,
aspectRatio: true
});
使用上面的代码,我的可调整大小的div
可以按预期工作,但当我添加containment
选项时,无论向哪个方向调整大小,div
的width
和height
都会调整为0
。
$('#child' ).resizable({
animate: true,
helper: '.ui-resizable-helper',
maxWidth: 500,
maxHeight: 500,
aspectRatio: true,
containment: '#parent'
});
为什么会这样?是虫子吗?
尝试添加此CSS:
#parent {
width: 500px;
height: 500px;
}
问题不在于#父项,而在于#子项。应用以下CSS,使其具有基本起始大小。
#child {
height:200px;
width:200px;
}
你也可以在这里看到我的小提琴,用你的代码来说明变化。
<table>
<tr>
<td>
<div class="child" style="border:solid 1px red;">
</div>
</td>
<td>
<div class="child" style="border:solid 1px red;">
<p>this is a test
</p>
</div>
</td>
</tr>
</table>
为子定义最小宽度和高度
.child {
min-width:50px;
min-height:50px;
}
将containment
设置为document
,并添加默认的minHeight
、minWidth
值。
var defaultHeight = $('#child').height();
var defaultWidth = $('#child').width();
$('.child').resizable({
animate: true,
helper: '.ui-resizable-helper',
minHeight:defaultHeight,
minWidth:defaultWidth,
maxWidth: 500,
maxHeight: 500,
aspectRatio: true,
containment: 'document'
});
小提琴