javascript - 可扩展的 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 的宽度，您必须在可调整大小的元素上使用静态 minWidth 和动态 maxWidth。在这种情况下，由于 div 与窗口大小相匹配，maxWidth 将是窗口宽度减去 minWidth 值。

Here是一个例子。