如何在jQuery Layout插件中分割窗格？

Question

我正在使用jQuery Layout插件创建一个包含北，南，西，东和中心窗格的页面。我想分割 - 在布局启动后 - 将西面窗格分成两个窗格（西北和西南）。

但我没有在API中找到任何功能来分割窗格！任何想法？

Answer 1

您可以使用嵌套窗格。该插件支持通过childOptions无限制嵌套。 http://layout.jquery-dev.com/demos/nested_simple.html

我建议命名子窗格唯一。

<div id="mainContainer"> 
     <iframe class="ui-layout-center" id="someiframecontent-right">Center Right content</iframe> 
     <div class="ui-layout-west"> 
      <div class="ui-layout-childsouth">North West content </div> 
      <div class="ui-layout-childcenter">South west content </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $('#mainContainer').layout({ 
      west__minSize: 100, 
      west__size: 0.5, 
      west__maxSize: 0.9, 
      center__minSize: 100, 
      center__size: 0.5, 
      center__maxSize: 0.9, 
      livePaneResizing: true, 
      west__childOptions: { 
       center__paneSelector: '.ui-layout-childcenter', 
       center__minSize: 100, 
       center__size: 0.5, 
       center__maxSize: 0.9, 
       south__paneSelector: '.ui-layout-childsouth', 
       south__minSize: 100, 
       south__size: 0.5, 
       south__maxSize: 0.9, 
       livePaneResizing: true 
      } 
     }); 
    </script> 

请记住，中心窗格始终是必需的（包括在子窗格中），因为它需要填充其他窗格留下的剩余空间。