Question

我正在尝试使用jQuery-Layout插件创建一个4窗格的布局。

非常基本的东西：

布局（请注意我使用iframe s）：

<iframe class="ui-layout-center">Outer Center</iframe>
<iframe class="ui-layout-east">Outer East</iframe>
<div class="ui-layout-west ">
    <iframe class="ui-layout-south">Middle South</iframe>
    <div class="ui-layout-center ">
        <iframe class="ui-layout-center">Inner Center</iframe>
    </div>
</div>

初始化：

$(document).ready(function () {
    $('body').layout({
        west__childOptions: {
            center__childOptions: {
            }
        }
    });
});

Here's a fiddle.

Updated, simpler fiddle.

一切顺利，直到我尝试调整窗格大小。有点有效，但非常粗糙。拖动窗格缩放器手柄时，看起来它们与鼠标指针失去联系并停止调整大小。

如果窗格很简单divs，一切正常，但如果窗格是iframes（这就是我需要的话），则不行。

关于我如何调试它的任何想法？

Answer 1

我找到了答案here

基本上，您需要屏蔽包含iframe的每个面板（及其父节点，如果是嵌套面板）。

像这样：

$('body').layout({
        center__maskContents:  true,
        west__maskContents:  true
});

这里是问题的小提琴的工作演示：click

如何使jquery-layout可调整大小的嵌套布局？

1 个答案: