我正在使用标准的jQuery布局（北，南，西，东和中），如站点文档中所示。
对于我的西部和中间面板，我有一个页眉和页脚窗格。
一切都正常工作，除了现在我需要暂时“隐藏”页眉和/或页脚，最终在某个时刻再次显示它们。
由于我不知道以编程方式隐藏/显示页眉和页脚窗格的方法，我正在恢复基本的jQuery。
我创建了以下功能：
// action = hide, show
// panel = center, east, west
// pane = header, footer
function setPaneState(action, panel, pane) {
if (action) {
switch (action) {
case 'hide':
$(".ui-layout-" + panel + " > .ui-layout-" + pane).hide();
break;
case 'show':
$(".ui-layout-" + panel + " > .ui-layout-" + pane).show();
break;
}
}
}
我这样称呼它：
setPaneState('hide', 'center', 'header');
和
setPaneState('show', 'center', 'header');
一切都很好，除了当我隐藏标题时，页脚向上移动等效空间。中心面板似乎没有“刷新”或“重绘”本身。我希望更改的面板能够正确重绘，但我不知道如何告诉jQuery布局如何做到这一点。
我知道jQuery布局提供了以下隐藏/显示面板的API。
layout.hide(panel); // Where 'panel' is one of: 'north', 'south', 'east', or 'west'
但是窗格似乎没有任何内容（页眉/页脚）。
请注意layout.resizeContent("west");记录here，似乎不起作用，抛出Uncaught TypeError: layout.resizeContent is not a function例外。
任何帮助表示赞赏。
更新：我发现这个layout.sizePane('north', 100);实际上有效。
顺便说一下，我正在使用jquery.layout 1.4.3
我发现以下似乎运作良好。
layout.resizeAll();
所以现在它看起来像这样：
// action = hide, show
// panel = center, east, west
// pane = header, footer
function setPaneState(action, panel, pane) {
if (action) {
switch (action) {
case 'hide':
$(".ui-layout-" + panel + " > .ui-layout-" + pane).hide();
break;
case 'show':
$(".ui-layout-" + panel + " > .ui-layout-" + pane).show();
break;
}
layout.resizeAll(); // <=== Added
}
}
虽然我本来期望更加“专注”调整大小，例如在特定的面板上。而不是整个布局。希望当我的面板（西部和中部）有很多内容时，我不会出现渲染性能问题。
如果有人对实际布局感兴趣，这里是：
<body class="wrapper" ng-app="app">
<div class="ui-layout-north" style="display: none;">
<div class="ui-layout-content">
<div id="ui-view-north" ui-view="north">Header Panel</div>
</div>
</div>
<div class="ui-layout-center" style="display: none;">
<div class="ui-layout-header">Center Header</div>
<div class="ui-layout-content">
<div id="ui-view-center" ui-view="center">Center Content</div>
</div>
<div class="ui-layout-footer">Center Footer</div>
</div>
<div class="ui-layout-west" style="display: none;">
<div class="ui-layout-header">West Header</div>
<div class="ui-layout-content">
<div id="ui-view-west" ui-view="west">West Content</div>
</div>
<div class="ui-layout-footer">West Footer</div>
</div>
<div class="ui-layout-east" style="display: none;">
<div class="ui-layout-header">East Header</div>
<div class="ui-layout-content">
<div id="ui-view-east" ui-view="east">East Content</div>
</div>
<div class="ui-layout-footer">East Footer</div>
</div>
<div class="ui-layout-south" style="display: none;">
<div class="ui-layout-content">
<div id="ui-view-south" ui-view="south">South content</div>
</div>
</div>
</body>
是的，我正在使用AngularJS多视图。