blocks|key|2808492|text|我会研究Javascript和拖放支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2808493|事实上，一个模拟的框架集可能只是两个div和它们之间的一个句柄，可以通过抓取来调整大小。JQuery提供了一些示例来演示如何调整元素的大小：http://jqueryui.com/demos/resizable/我认为扩展这个概念以适应它并不是很难。|offset|length|2808494|然后我将通过AJAX加载文档，这可能会完全替换框架。|2808495|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/resizable/^0|0|1Y|10|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>I would look into Javascript and drag and drop support. </p>

<p>In fact, an emulated frameset could be just two divs and a handle between them which can be grabbed to resize. JQuery has samples to demonstrate how to resize an element: <a href="http://jqueryui.com/demos/resizable/" rel="nofollow">http://jqueryui.com/demos/resizable/</a> I don't think it would be very difficult to expand that concept to fit.</p>

<p>Then I would load the documents via AJAX, and this could probably replace frames completely.</p>


blocks|key|906780|text|你可能会喜欢YUI+http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html的这个链接|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|906781|示例：http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html|906782|entityMap|0|LINK|mutability|MUTABLE|url|http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html|1|http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html^0|A|28|0|0|3|2F|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>You may like this link for YUI
<a href="http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html" rel="nofollow">http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html</a></p>

<p>Example:
<a href="http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html" rel="nofollow">http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html</a></p>


blocks|key|4598277|text|在我看来，jQuery+Resizable或js之类的东西就是您的解决方案。去吧，我是demos。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4598278|在使用jQuery的情况下，您将有额外的可能性：|4598279|4598280|Maximum+/+minimum+size|unordered-list-item|4598281|Constrain+area|4598282|Delay+start|4598283|Snap+to+grid|4598284|<代码>F211|4598285|以下是jQuery可调整大小的默认功能的示例代码：|4598286|<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>|code-block|syntax|javascript|4598287|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/resizable/|1^0|5|G|0|17|5|1|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]|$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|1G|8|@]|9|@]|C|$]]|$1|J|3|K|5|I|7|1H|8|@]|9|@]|C|$]]|$1|L|3|M|5|I|7|1I|8|@]|9|@]|C|$]]|$1|N|3|O|5|I|7|1J|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1K|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1L|8|@]|9|@]|C|$]]|$1|T|3|U|5|V|7|1M|8|@]|9|@]|C|$W|X]]|$1|Y|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|11|12|13|C|$14|15]]]]

<p>From my point of view <a href="http://jqueryui.com/demos/resizable/" rel="nofollow">jQuery Resizable</a> or such js things is your solution. Go for it's <a href="http://jqueryui.com/demos/resizable/" rel="nofollow">demos</a>.<br>
In case of using jQuery you'll have extra possibilities:  </p>

<ul>
<li>Maximum / minimum size</li>
<li>Constrain resize area</li>
<li>Delay start</li>
<li>Snap to grid</li>
</ul>

<p>Here is a sample code for jQuery Resizable default functionality:  </p>

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

&lt;script&gt;
    $(function() {
        $("#resizable").resizable();
    });
&lt;/script&gt;

&lt;div id="resizable"&gt;
    &lt;h3&gt;Resizable&lt;/h3&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2524603|text|请不要使用框架集。我也不认为jQuery调整大小会对你有多大帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2524604|要做到这一点，最好的方法是使用“拆分器”。有几个用于jquery的插件可以通过许多不同的方式来实现这一点，而且它们实际上都非常简单。|2524605|我以前用过这个：http://methvin.com/splitter/|offset|length|2524606|你可以在这里找到一个很好的演示：http://methvin.com/splitter/3psplitter.html|2524607|entityMap|0|LINK|mutability|MUTABLE|url|http://methvin.com/splitter/|1|http://methvin.com/splitter/3psplitter.html^0|0|0|8|S|0|0|G|17|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$F|10|G|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

<p>Do not use frameset, please. I don't think jQuery resize will help you much, either.</p>

<p>The best way to do this is by using a "splitter". There are several plugins for jquery that will do this in many different way and they all are actually quite simple. </p>

<p>I have previously used this one: <a href="http://methvin.com/splitter/">http://methvin.com/splitter/</a></p>

<p>You can find a nice demo here: <a href="http://methvin.com/splitter/3psplitter.html">http://methvin.com/splitter/3psplitter.html</a></p>


blocks|key|4598404|text|如果你不介意桌子，Janus+Troelsen上面的解决方案是很棒的。我也发现了这个没有表格的SoonDead解决方案，它在Chrome和FF上工作得很好，但不得不在IE8上花费大量的时间。在StackOverflow上的名字是"Emulate+Frameset+Separator+Behavior“|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4598405|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16635959/emulate-frameset-separator-behavior^0|37|Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Janus Troelsen's solution above is great if you don't mind tables.
I also found this solution by SoonDead  without tables, which worked great with Chrome and FF, but had to spend a nasty amount of time for IE8. It's on StackOverflow as "<a href="https://stackoverflow.com/questions/16635959/emulate-frameset-separator-behavior">Emulate Frameset Separator Behavior</a>"</p>


<p>I understand that <code>&lt;frameset&gt;</code> and <code>&lt;frame&gt;</code> tag are becoming deprecated. Is there a way to emulate resizable frames? What I want is a narrow separator separating the area either horizontally or vertically, which is movable by the user so that when one side of it becomes smaller, the other side becomes larger, and vice versa. I do not want to fill in each frame with an html page like the conventional frame, but instead with some DOM materials.</p>

<p>I know that CSS3 has <code>resize</code> attribute, but that controls only the size of itself. I am not sure if this is to be used for the solution.</p>

<p>I don't particularly prefer using JavaScript, but I am not excluding the possibility of using it if necessary.</p>


Resizable frame emulation

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道<frameset>和<frame>标签正在被弃用。有没有办法模拟可调整大小的框架？我想要的是一个水平或垂直分隔区域的窄分隔符，用户可以移动它，这样当它的一侧变小时，另一侧变大，反之亦然。我不想像传统框架那样用html页面填充每个框架，而是用一些DOM材料填充。我知道CSS3有resize属性，但它只能控制自身的...

问可调整大小的帧仿真
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可调整大小的帧仿真EN