1

如站点文档中所示，我正在使用标准的 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");如此处所述，似乎不起作用，抛出Uncaught TypeError: layout.resizeContent is not a function异常。

任何帮助表示赞赏。

更新：我发现这layout.sizePane('north', 100);确实有效。

顺便说一句，我正在使用jquery.layout 1.4.3

4

1 回答 1

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

尽管我本来期望更“集中”的调整大小，例如在特定面板上。而不是整个布局。希望当我的面板（西部和中心）中有很多内容时，我不会遇到渲染性能问题。

如果有人对实际布局感兴趣，这里是：

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

于 2018-03-06T06:43:43.623 回答