0

我正在尝试创建一个可调整大小的内容窗格，当在页面的主要内容侧单击不同的链接时，它将从本地文件1加载。

我尝试了两种方法。第一种是使用<div>，但我还没有找到一种从外部源加载的好方法2这种方式。因此，我在 div 中使用 iFrame。

但是，我在使用 iFrame 正确调整主要内容的大小时遇到​​了一些问题。使用类似的代码，纯 div 版本可以正确调整大小：http: //jsfiddle.net/jvnn6/4/

但是，当我尝试使用 iFrame 时，页面左半部分的内容没有正确调整大小。 http://jsfiddle.net/JX4yM/

在这里，我添加了以下 CSS：

  .ui-resizable-helper {
    border: 50px solid rgba(239, 239, 239, .9);
    margin: -75px;
}

这对 jQuery

helper: "ui-resizable-helper",

这是怎么回事？（我必须添加 .ui-resizable-helper 因为当鼠标移到 iFrame 上时调整大小会很奇怪。这是一个示例：http: //jsfiddle.net/36S7p/1/）

==================================================== ===================

1 : 我不打算很快在网上托管它

2：当然，另一种选择是将所有内容嵌入我的网页本身，并根据需要在右侧窗格中隐藏/显示不同的部分。但是，这存在一些结构性问题，我不会讨论。

4

1 回答 1

0

从 Javascript 窗格中取出<script>标签，您就很成功了。此外，您需要获取正文宽度而不是文档宽度。

$('#resizable').on("resize", function (event, ui) {
     var setWidth = $("#resizable").width();
     $(".content").width($("body").width() - setWidth);
});

更新小提琴

于 2013-07-25T22:31:08.387 回答