我希望创建一个3x3的元素网格,固定在一个更大的父元素内部,这些元素都是可调整大小的。问题是,我希望所有9个子元素始终占据父元素的100%的空间。因此,如果我增加左上角元素的宽度,那么同一行的两个元素的大小应该减小以适应它。例如,
A B C
D E F
G H I
在上面的网格中,我们假设每个字母是30px × 30px。如果我拖动调整A的大小并将宽度增加到60px,那么我希望B和C各减少15px。
显然,这可以使用原生jQuery UI来完成。在resizable()初始化中为每个子元素设置一个包含参数,就可以将它们全部绑定到父元素中。还可以检查每当元素更改时触发的resize事件,以确定每个相邻子元素可能需要移动的时间。问题是,这将是一个相当复杂的算法。这是可行的,但需要大量的工作。在我重新发明轮子之前,我想看看是否存在支持此任务的库/插件,或者有人知道类似的开源项目?
谢谢。
还没见过这样的框架,但听起来是个有趣的想法。还有很多事情需要考虑,比如其他字母应该如何表现?
play a little:
$('.row div:odd').css('background','blue');
$('div').click(function(){
var orgWidth = $(this).width();
$(this).width(orgWidth+100);
var gridwith = $(this).parent().width();
var columns = 3;
var importantClass = '.'+$(this).attr('class');
var resizeTo = $(this).width();
var columnsWidth = (gridwith-resizeTo)/(columns-1);
$(this).parent().children().not(importantClass).width(columnsWidth);
return false;
});
和
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col4"></div>
<div class="col5"></div>
<div class="col6"></div>
</div>
<div class="row">
<div class="col7"></div>
<div class="col8"></div>
<div class="col9"></div>
</div>
和
.row {width:600px; overflow:auto; divst-style:none;}
.row div {float:left; width:200px; height:200px; background:red;}
.row div.odd {background:blue;}
这将如何作用于我们所考虑的?