jQuery Layout: Refreshing/Redrawing/Resizing a panel (after hiding/showing a header or footer)
Question
I'm using a standard jQuery layout (north, south, west, east and center) as indicated in the site documentation.
For both my west and center panels, I have a header and footer pane.
Everything is working correctly except that now I needed to temporarily 'hide' the header and/or footer, to eventually show them again at some point.
Since I'm not aware of a way to programmatically hide/show the header and footer panes, I'm reverting to basic jQuery.
I created the following function:
// 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;
}
}
}
And I call it this way:
setPaneState('hide', 'center', 'header');
and
setPaneState('show', 'center', 'header');
Everything works well except that when I hide the header, the footer moves up by the equivalent space. The center panel does not seem to 'refresh' or 'redraw' itself. I would like the panel which gets altered to be redrawn correctly, but I'm not sure how to tell jQuery layout how to do that.
I know that jQuery layout provides the following API to hide/show panels.
layout.hide(panel); // Where 'panel' is one of: 'north', 'south', 'east', or 'west'
But nothing seems to exist for panes (header/footer).
Note that layout.resizeContent("west"); as documented here , doesn't seem to work, throwing Uncaught TypeError: layout.resizeContent is not a function exception.
Any help is appreciated.
Update: I've found that this layout.sizePane('north', 100); actually works though.
By the way, I'm using jquery.layout 1.4.3
1 answers
solution1
1 2018-03-06 06:43:43
I found the following which seems to work well.
layout.resizeAll();
So now it looks like this:
// 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
}
}
Although I would have expected a more 'focused' resize, such as on a specific panel. And not the entire layout. Hopefully I won't get rendering performance issues when my panels (west and center) have a lot of content in them.
If anyone is interested in the actual layout, here it is:
<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>
Yes, I'm using AngularJS multi-views.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.