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

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