Question

我正在使用标准的jQuery布局（北，南，西，东和中），如网站文档中所示。

对于我的西部和中间面板，我有一个页眉和页脚窗格。

一切正常，但现在我需要暂时隐藏＆＃39;标题和/或页脚，最终会在某个时刻再次显示它们。

由于我不知道以编程方式隐藏/显示页眉和页脚窗格的方法，因此我将恢复基本的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');

除了当我隐藏标题时，页脚向上移动等效空间，一切都运行良好。中心面板似乎没有刷新＆＃39;或者＆＃39;重绘＆＃39;本身。我希望更改的面板能够正确重绘，但我不知道如何告诉jQuery布局如何做到这一点。

我知道jQuery布局提供了以下隐藏/显示面板的API。

layout.hide(panel); // Where 'panel' is one of: 'north', 'south', 'east', or 'west'

但是窗格（页眉/页脚）似乎没有任何内容。

请注意，layout.resizeContent("west");所记录的Uncaught TypeError: layout.resizeContent is not a function似乎不起作用，导致layout.sizePane('north', 100);例外。

感谢任何帮助。

更新：我发现此jquery.layout 1.4.3确实有效。

顺便说一下，我正在使用{{1}}

Answer 1

我发现以下内容似乎运作良好。

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

虽然我本来期待一个更专注的＆＃39;调整大小，例如在特定面板上。而不是整个布局。希望当我的面板（西部和中部）有很多内容时，我不会遇到渲染性能问题。

如果有人对实际布局感兴趣，请点击：

<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多视图。

jQuery布局：刷新/重绘/调整面板大小（隐藏/显示页眉或页脚后）

1 个答案: