Question

我正在寻找创建一个3x3网格元素，固定在一个更大的父元素内部，这些元素都可以调整大小。问题是，我希望所有9个子元素始终占据父元素的100％空间。因此，如果我增加左上角元素的宽度，那么同一行上的两个元素的大小应该减小以适应这种情况。例如，

A B C
D E F
G H I

在上面的网格中，我们假设每个字母是30px乘30px。如果我拖动调整大小A并将宽度增加到60px，那么我希望B和C每减少15像素。

显然，这可以使用本机jQuery UI来完成。在resizable（）初始化中为每个子节点设置一个包含参数将负责在父节点内绑定它们。还可以检查元素更改时触发的resize事件，以确定每个相邻子项何时可能需要移动。问题是，这将是一个相当复杂的算法。这是可行的，但这是很多工作。在重新发明轮子之前，我想知道是否存在支持此任务的库/插件，或者是否有人知道类似的开源项目？

感谢。

Answer 1

没有看到这样的框架，但听起来像一个有趣的想法。不过要考虑很多事情，比如其他字母应该如何采取相应行动？

玩了一下：

    $('.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;}

这会如何影响你的收集？

使用jQuery的可调整大小元素的网格 - 是否有任何库可以支持这个？

1 个答案: