Question

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

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

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

Answer 1

请不要使用frameset。我不认为jQuery调整大小会对你有所帮助。

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

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

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

Answer 2

从我的角度来看jQuery Resizable或者这样的事情是你的解决方案。去吧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>

Answer 3

你可能喜欢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

Answer 4

如果您不介意表格，Janus Troelsen的解决方案非常棒。我也发现这个解决方案是SoonDead没有表格，这对Chrome和FF很有用，但是不得不花费大量时间用于IE8。它在StackOverflow上为“Emulate Frameset Separator Behavior”

Answer 5

我会调查Javascript并拖放支持。

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

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

可调整大小的帧仿真

5 个答案: