我正在使用网站文档中指示的标准 jQuery 布局(北、南、西、东和中心)。
对于我的西面板和中心面板，我都有一个页眉和页脚 Pane 。
一切正常，只是现在我需要暂时“隐藏”页眉和/或页脚，最终在某个时候再次显示它们。
由于我不知道以编程方式隐藏/显示页眉和页脚 Pane 的方法，所以我将恢复到基本的 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'
但 Pane (页眉/页脚)似乎不存在。
请注意，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 多 View 。
关于javascript - jQuery 布局 : Refreshing/Redrawing/Resizing a panel (after hiding/showing a header or footer)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49124428/