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

Question

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

非常基本的东西：

布局（注意我使用iframes）：

<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: {
            }
        }
    });
});

这是一个小提琴。

更新，更简单的小提琴。

一切都很好，直到我尝试调整窗格的大小。它有点工作，但非常粗糙。拖动窗格调整大小手柄时，看起来它们与鼠标指针失去联系并停止调整大小。

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

关于如何调试这个的任何想法？

Answer 1

我在这里找到了答案

基本上，您需要屏蔽包含iframe.

像这样：

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

这是问题中小提琴的工作演示：单击