可扩展的div面板

Question

我正在尝试制作一些可扩展的垂直div /面板。以下是一些图片，以使其更清晰。

红线表示用户应单击并向左或向右拖动的位置，例如，向左拖动后，右侧应显示更多内容，如下所示：

有人可以为此发布一些例子吗？感谢。

Answer 1

jQuery UI提供此功能。在他们的网站上查看resizable。

编辑： Here是一种使用jQuery UI可调整大小的方法。注意，让另一个调整大小的技巧不是jQuery;我在这里使用纯CSS：

div {
    border: 1px solid black;
    box-sizing: border-box;
    height: 200px;
}
#content1 {
    width: 50%;
    float: left;
}
#content2 {
    overflow: hidden;
    float: none;
}

与HTML同步：

<div id="content1">Lorem ipsum dolor sit amet.</div>
<div id="content2">Lorem ipsum dolor sit amet.</div>

和Javascript：

$("#content1").resizable({
    handles: "e"
});

要限制两个div s'宽度，您必须在可调整大小的元素上使用静态minWidth和动态maxWidth。在这种情况下，由于div匹配窗口的大小，因此maxWidth将是窗口宽度减去minWidth值。

Here就是一个例子。