Question

我不是一个真正的网络开发人员所以请原谅我，如果我的词汇量有限。

我想要做的是创建标题和主要内容面板。主内容面板应包含左侧的菜单并可滚动。另一方面，标题应固定。左侧的菜单也应该静态驻留在内容面板旁边的垂直位置。

|- - - - - - - - - - - - - - -|
| Header (fixed)              |
|- - - - - - - - - - - - - - -|
|          |                | |
| | - - - -|                | |
| | Menu   |                | |
| |(fixed) |  Main-Content  | |
| |        |  (scrollable)  | |
| |- - - - |                | |
|          |                | |
|          |                | |
|- - - - - |- - - - - - - - |-|

问题是我已经遇到麻烦了。我用过这个：

<ui:style>
    .home_header {
    background-color: #FFC400;
    margin:0px;
    width:100%;
    height:90px;
    position: relative;
    }

    .home_main {
    margin-top:90px;
    }
</ui:style>

<g:VerticalPanel width="100%" height="100%">

    <!-- For now this is empty -->
    <g:DeckPanel ui:field="headerPanel" styleName="{style.home_header}">
    </g:DeckPanel>

    <g:HorizontalPanel horizontalAlignment="ALIGN_CENTER" width="100%" styleName="{style.home_main}">
        <g:ScrollPanel>
            <g:DockPanel>
                <g:Dock direction="CENTER">
                    <g:HTMLPanel ui:field="mainContentPanel" width="1024px" height="1005"> 
                    ...
                    </g:HTMLPanel>
                </g:Dock>
            </g:DockPanel>
        </g:ScrollPanel>

    </g:HorizontalPanel>
</g:VerticalPanel>

我正在设置标题的位置：

public UIHome() {
    initWidget(uiBinder.createAndBindUi(this));     
    Window.addWindowScrollHandler(new Window.ScrollHandler() {
        @Override
        public void onWindowScroll(
                com.google.gwt.user.client.Window.ScrollEvent event) {
            headerPanel.getElement().getStyle().setTop(event.getScrollTop(), Unit.PX);
        }
    });
}

但一方面问题在于，一方面页脚是闪烁的，如果向下滚动，内容会显示在其上方。

我没想到我是否应该使用像框架集这样的东西，但我不确定这是否是这样的方式。

有关如何设置此布局的任何建议吗？

Answer 1

这不是DockLayoutPanel的确切用例吗？您可以在Showcase中看到它。

就UiBinder而言，它看起来像something like this：

<g:DockLayoutPanel unit='EM'>
  <g:north size='5'>
    <g:DeckPanel ui:field="headerPanel" styleName="{style.home_header}" />
  </g:north>
  <g:center>
    <g:ScrollPanel>
        <g:HTMLPanel ui:field="mainContentPanel" width="1024px" height="1005"> 
            ...
        </g:HTMLPanel>
    </g:ScrollPanel>
  </g:center>
  <g:west size='192'>
    <g:HTML>
      <ul>
        <li>Sidebar</li>
        <li>Sidebar</li>
        <li>Sidebar</li>
      </ul>
    </g:HTML>
  </g:west>
</g:DockLayoutPanel>

GWT：包含框架

1 个答案: