可调整大小的帧模拟答案

【问题标题】：Resizable frame emulation可调整大小的帧模拟
【发布时间】：2011-09-04 15:31:13
【问题描述】：

我了解<frameset> 和<frame> 标签正在被弃用。有没有办法模拟可调整大小的框架？我想要的是一个狭窄的分隔器，水平或垂直分隔区域，用户可以移动它，这样当它的一侧变小时，另一侧变大，反之亦然。我不想像传统框架那样用 html 页面填充每个框架，而是使用一些 DOM 材料。

我知道 CSS3 有 resize 属性，但它只控制自身的大小。我不确定这是否用于解决方案。

我不是特别喜欢使用 JavaScript，但我不排除在必要时使用它的可能性。

【问题讨论】：

This is the best I could come up with。 JavaScript 并且没有竖线（依赖于 CSS3 的调整大小）。应该很容易移植到 vanilla JS。
不，frames 不会被弃用如果您使用正确的 HTML4.01 文档类型（HTML4.01 / XHTML1.0 与.HTML5顺便说一句）。现在我显然不会将它用于客户的项目，但可能仍然用于技术文档（或者可能不会，因为在这种情况下我不会关心 IE6/7 并且 IE8 有 OK 支持像position:fixed 这样的侧边栏）
你在寻找类似的东西吗jsbin.com
@Champ：是的。如果您使用孤立的代码做出答案，您将获得赏金。
Frames are being obsoleted in HTML5，未弃用。也就是说，它们已被完全删除。

标签： html css frame

【解决方案1】：

如果您不介意桌子，上述 Janus Troelsen 的解决方案非常棒。我还发现了 SoonDead 的这个没有表格的解决方案，它在 Chrome 和 FF 上效果很好，但不得不为 IE8 花费大量时间。它在 StackOverflow 上的名称为“Emulate Frameset Separator Behavior”

【讨论】：

【解决方案2】：

请不要使用框架集。我也不认为 jQuery resize 对你有多大帮助。

最好的方法是使用“分离器”。 jquery 有几个插件可以以多种不同的方式执行此操作，它们实际上都非常简单。

我之前用过这个：http://methvin.com/splitter/

您可以在这里找到一个不错的演示：http://methvin.com/splitter/3psplitter.html

【讨论】：

这很棒。我终于得到了我想要的。谢谢。
显然此插件不再维护（2017 年）所有示例都不适用于 Chrome 版本 60.0.3112.113，至少它们不显示框架类型视图或调整大小功能。
@raphie 关于演示无法正常工作的说法是正确的。问题是 jQuery 没有加载（404）。但是，您仍然可以在 jsbin like this 中复制/粘贴/运行代码

【解决方案3】：

从我的角度来看jQuery Resizable 或这样的 js 东西是你的解决方案。去吧demos。
如果使用 jQuery，您将有额外的可能性：

最大/最小尺寸
约束调整区域大小
延迟开始
对齐网格

这里是 jQuery Resizable 默认功能的示例代码：

<style>
    #resizable {
        width: 150px;
        height: 150px;
        display: block;
        border: 1px solid gray;
        text-align: center;
    }
</style>

<script>
    $(function() {
        $("#resizable").resizable();
    });
</script>

<div id="resizable">
    <h3>Resizable</h3>
</div>

【讨论】：

【解决方案4】：

您可能会喜欢 YUI 的此链接 http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html

示例： http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html

【讨论】：

【解决方案5】：

我会研究 Javascript 和拖放支持。

事实上，一个模拟的框架集可能只是两个 div 和它们之间的一个句柄，可以抓住它来调整大小。 JQuery 提供了一些示例来演示如何调整元素的大小：http://jqueryui.com/demos/resizable/ 我认为扩展该概念以适应这一点并不难。

然后我会通过 AJAX 加载文档，这可能会完全替换框架。

【讨论】：