如何使用 jQuery Layout UI 添加内部 North 面板？答案

【问题标题】：How can I add a inner North panel using jQuery Layout UI?如何使用 jQuery Layout UI 添加内部 North 面板？
【发布时间】：2016-12-27 18:10:38
【问题描述】：

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

我正在尝试创建一个包含 3 个面板的页面。在西边，我需要添加一个占据页面全高的面板。我还需要添加一个北面板，该面板将从“西面板”结束的位置开始，一直到屏幕的东侧。最后，我喜欢在中间的“西面板下方”添加一个面板，它占据了页面的其余部分。

换句话说，我正在尝试使用jQuery UI Layout 进行以下布局。

这是我所做的

	$(function () {
		$('body').layout({
			applyDefaultStyles: true,
			west__size: 200
		});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>

<link href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css" rel="stylesheet"/>

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

但是，这会使北面板越过页面并越过西面板。

如何修复它并获得我在上面绘制的外观？

【问题讨论】：

标签： javascript jquery css jquery-ui layout

【解决方案1】：

当您询问“内部北窗格”时，您有点回答了自己的问题。您需要的是一个仅包含西部和中心窗格的外部布局。然后在该中心窗格中添加一个只有北窗格和中心窗格的内部布局。这会给你你想要的......

<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>

【讨论】：

感谢您的回复。您提供的代码 id 不起作用。它显示了西面板一直到顶部。但是北面板已经不存在了。
内部窗格是否应该有不同的类名？

【解决方案2】：

我终于找到了问题所在。为此，我必须为中心 div 提供一个新 ID 并创建一个 layout 的新实例，所以我有 2 个单独的实例，一个在另一个里面

成功了

<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>

【讨论】：

【解决方案3】：

是的，你还需要init内部布局。我之前没有显示该代码，因为我认为您知道。但是有很多方法不需要添加元素 ID，例如...

Layout 接受 any 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();

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

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

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

我建议在专门的论坛中询问布局问题。您可能会得到更快的答案，并且您的问题可能会帮助遇到类似情况的其他人。

【讨论】：