Javascript 如何使用jQuery布局UI添加内部北面板？

我来了一个跨页面管理插件，即。我想在我正在开发的应用程序中使用它

我正在尝试创建一个有3个面板的页面。在西部，我需要添加一个面板，它占据我页面的全部高度。我还需要添加一个北面板，从“西面板”的末端开始，一直到屏幕的东侧。最后，我想在中间添加一个面板，在“西板”下，剩下的页面。

换句话说，我正在尝试使用以下布局

这就是我所做的

$（函数（）{
$（'body'）。布局({
applyDefaultStyles:true，
西区面积：200
});
})；

北
西部
中间的

当您询问“内部北窗格”时，您可以回答自己的问题。您需要的是一个只包含西窗格和中窗格的外部布局。然后在该中心窗格内添加一个只包含北窗格和中窗格的内部布局。这将为您提供所需的

<div class="ui-layout-west"> WEST </div>
<div class="ui-layout-center">
    <div class="ui-layout-north"> NORTH </div>
    <div class="ui-layout-center"> CENTER </div>
</div>

WEST
北
居中

当您询问“内部北窗格”时，您可以回答自己的问题。您需要的是一个只包含西窗格和中窗格的外部布局。然后在该中心窗格内添加一个只包含北窗格和中窗格的内部布局。这将为您提供所需的

<div class="ui-layout-west"> WEST </div>
<div class="ui-layout-center">
    <div class="ui-layout-north"> NORTH </div>
    <div class="ui-layout-center"> CENTER </div>
</div>

WEST
北
居中

我终于解决了这个问题。为此，我必须为中心div提供一个新ID，并创建一个

布局的新实例，因此我有两个独立的实例，一个在另一个内部

这就成功了

<script>
    $(function () {
        $('#mainContainer').layout({
            applyDefaultStyles: true,
            west__size: 300
        });

        $('#innderContainer').layout({
            applyDefaultStyles: true
        });

    });
</script>

<div id="mainContainer" class="ui-layout-center">

    <div class="ui-layout-west">
        West
    </div>

    <div class="ui-layout-center" id="innderContainer">

        <div class="ui-layout-pane-south">
            SOUTH
        </div>

        <div class="ui-layout-north">
            North
        </div>

        <div id="centerInnerCenterPane" class="ui-layout-center">
            Center
        </div>

    </div>

</div>


$（函数（）{
$（“#主容器”）。布局({
applyDefaultStyles:true，
西区面积：300
});
$（'#innderContainer'）。布局({
applyDefaultStyles:true
});
});
西部
南方
北
居中
我终于解决了这个问题。为此，我必须为中心div提供一个新ID，并创建一个
布局的新实例，因此我有两个独立的实例，一个在另一个内部

这就成功了

<script>
    $(function () {
        $('#mainContainer').layout({
            applyDefaultStyles: true,
            west__size: 300
        });

        $('#innderContainer').layout({
            applyDefaultStyles: true
        });

    });
</script>

<div id="mainContainer" class="ui-layout-center">

    <div class="ui-layout-west">
        West
    </div>

    <div class="ui-layout-center" id="innderContainer">

        <div class="ui-layout-pane-south">
            SOUTH
        </div>

        <div class="ui-layout-north">
            North
        </div>

        <div id="centerInnerCenterPane" class="ui-layout-center">
            Center
        </div>

    </div>

</div>


$（函数（）{
$（“#主容器”）。布局({
applyDefaultStyles:true，
西区面积：300
});
$（'#innderContainer'）。布局({
applyDefaultStyles:true
});
});
西部
南方
北
居中
是的，您还需要初始化内部布局。我之前没有显示该代码，因为我认为您知道。但是有许多方法不需要添加元素ID，例如

Layout接受任何jQuery选择器，因此您可以执行以下操作：

$('body').layout({
    applyDemoStyles: true,
    west__size: 300
});

$('body > .ui-layout-center').layout({
    applyDemoStyles: true
});


或者，您可以通过返回的布局对象访问外部布局窗格：

// change the global default to avoid repeating
$.layout.defaults.panes.applyDemoStyles = true;

$('body').layout({
    west__size: 300
}).panes.center.layout();


或使用“子项”选项指定嵌套布局：

$('body').layout({
    applyDemoStyles: true,
    west__size: 300,
    center__children: {
        applyDemoStyles: true,
        north__size: 150
    }
});


还有更多的方法，例如在容器元素上添加布局选项作为数据布局属性；但是上面的示例已经足够了

我建议在专门的论坛中询问布局问题。你可能会得到更快的答案，你的问题可能会帮助其他人解决类似的问题。
是的，你还需要初始化内部布局。我以前没有显示该代码，因为我以为你知道。但是有很多方法不需要添加元素ID，例如作为

Layout接受任何jQuery选择器，因此您可以执行以下操作：

$('body').layout({
    applyDemoStyles: true,
    west__size: 300
});

$('body > .ui-layout-center').layout({
    applyDemoStyles: true
});


或者，您可以通过返回的布局对象访问外部布局窗格：

// change the global default to avoid repeating
$.layout.defaults.panes.applyDemoStyles = true;

$('body').layout({
    west__size: 300
}).panes.center.layout();


或使用“子项”选项指定嵌套布局：

$('body').layout({
    applyDemoStyles: true,
    west__size: 300,
    center__children: {
        applyDemoStyles: true,
        north__size: 150
    }
});


还有更多的方法，例如在容器元素上添加布局选项作为数据布局属性；但是上面的示例已经足够了

我建议在专门的论坛中提问布局问题。你可能会得到更快的答案，你的问题可能会帮助其他人解决类似的问题。
谢谢你的回答。你提供的代码不起作用。它显示了西面板一直到顶部。但是北面板已经不存在了。是否应该有不同的类名对于内窗格？感谢您的响应。您提供的代码id无效。它显示了从西面板一直到顶部的方向。但是北面板已经不存在了。是否应该为内窗格指定不同的类名？