1

我想<frameset>使用 HTML5 一段时间，我设法使用 html 代码创建了一些东西，我想让两个 iframe 可调整大小，但也要并排放置，两个 iframe 之间存在问题，因为我的代码使它们独立调整大小，我想要调整大小，就像在 old 中实现的那样<frameset>。

这是我的html代码：

<body>
    <div class="resizable1">
        <iframe class="menu" src="menu.html"></iframe>
    </div>
    <div class="resizable2">
        <iframe class="mainContent" src="events.html"></iframe>
    </div>
</body>

这是我的CSS：

.ui-resizable-helper {
    border: 1px dotted gray;
}

.resizable1 {
    float: left;
    width: 20%;
    height: 80%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.resizable2 {
    float: left;
    width: 75%;
    height: 80%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.menu {
    float: left;
    width: 20%;
    height: 80%;
}

.mainContent {
    float: left;
    width: 75%;
    height: 80%;
}

这是我的 jQuery 脚本：

$(function() {
        $(".resizable1").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500
        });
        $(".resizable2").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500
        });
    });
</script>
4

1 回答 1

0

我同意上述观点，我建议手动调整它们的大小，但如果你想保留动画，也许可以这样做：（使用包含属性限制高度并尝试计算手动调整大小所需的新宽度第一个调整大小后的第二个）

JSFiddle

在 HTML 中添加了一个容器：

<div id="container">
    <div class="resizable1">
        <iframe class="menu" src="www.google.com">
            bla
        </iframe>
    </div>
    <div class="resizable2">
        <iframe class="mainContent" src="www.yahoo.com"></iframe>
    </div>
</div>

在 CSS 中设置高度：

.ui-resizable-helper {
    border: 1px dotted gray;
}
#container{
    height: 500px;
    width: 600px;
}
.resizable1 {
    float: left;
    width: 20%;
    height: 100%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.resizable2 {
    float: left;
    width: 75%;
    height: 100%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.menu {
    float: left;
    width: 20%;
    height: 80%;
}

.mainContent {
    float: left;
    width: 75%;
    height: 80%;
}

在 jquery 中手动调整大小（抱歉，不能完全工作，希望对您有所帮助）

$(function() {
        $(".resizable1").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500,
            containment: '#container'
        });
        $(".resizable2").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500,
            containment: '#container'
        });
    $(".resizable1").resize(
        function(e){
            var fullWidth = $("#container").innerWidth();
            var r1Width = $(".resizable1").outerWidth();
            $(".resizable2").width(fullWidth - r1Width-6);
            var r2Width = $(".resizable2").outerWidth();
            console.log(r1Width+" + "+r2Width+" = "+fullWidth);
        }
    );
});
于 2013-09-10T15:44:34.460 回答