Question

我尝试使用'JQuery UI'做这样的分离器：jsfiddle.net/8qzTJ/

HTML

<div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

JS：

$(function () {
    $(".resizable1").resizable({
        handles: 'e',
        minWidth: '50',
        maxWidth: '350',
        resize: function() {
            var remainingSpace = $(this).parent().width() - $(this).outerWidth(),
                divTwo = $(this).next(),
                divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
            divTwo.width(divTwoWidth);
        }
    });
});

CSS：

.wrap {
    width: 400px;
    border: 1px brown solid;
    font-size: 0;
}
.resizable {
    width: 200px;
    height: 120px;
    padding: 0.5em;
    background-color: coral;
    display: inline-block;
}
.resizable2 {
    background-color: olive;
}

但我希望另一部分（未直接调整大小的部分）保持其大小并被推动。

有什么想法吗？

谢谢=）

Answer 1

你的意思是这样的： http://jsfiddle.net/8qzTJ/1106/

我删除了包装div的宽度

.wrap {
    /*width: 400px;*/
    border: 1px brown solid;
    font-size: 0;
}

在js中，我评论了改变第二个div宽度的代码：

$(function () {
    $(".resizable1").resizable({
        handles: 'e',
        minWidth: '50',
        maxWidth: '350'/*,
        resize: function() {
            var remainingSpace = $(this).parent().width() - $(this).outerWidth();
                divTwo = $(this).next();
                divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
            divTwo.width(divTwoWidth);
        }*/
    });
});

分配器保留大小

1 个答案: