1

我正在使用以下模板创建一个网站。

----------------------------------------------------------------
Header
----------------------------------------------------------------
left menu | Content                                 |right menu|
          |                                         |          |
          |                                         |          |
          |                                         |          |
          |                                         |          |
          |                                         |          |
----------------------------------------------------------------
Footer
----------------------------------------------------------------

在标题中，我有一个下拉菜单。当从下拉菜单中选择一个选项时，左侧菜单组件会使用 Ajax 更新，以显示两个带有复选框项目的面板。请参阅下面链接中的屏幕截图。

http://imgur.com/Cdkcgk0

当您选择一个、无或多个项目并单击提交时，布局的内容组件会更新一条消息。

我的网站在功能上工作：布局很好，下拉菜单工作，内容更新等。 我的问题是如何摆脱布局左侧菜单组件中嵌套面板在视觉上不吸引人的效果。 如果您仔细观察图像，您可以看到 id="west"（最外层）的布局单元的轮廓、id="leftMenu" 的面板（中间）以及 id="leftMenuA" 和 "leftMenuB" 的面板（最里面）。请参阅下面的代码块以获取 id。

    <p:layoutUnit id="west" position="west" size="250" resizable="true" closable="true" collapsible="true">
        <p:panel id="leftMenu">
            <p:panel id="leftMenu1A" rendered="#{leftMenuBean.leftMenu1}" header="North" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="500" widgetVar="panelA">
                <p:selectManyCheckbox value="#{leftMenu1Bean.selectedServersA}" layout="pageDirection">
                        <f:selectItems value="#{leftMenu1Bean.serversA}" />
                </p:selectManyCheckbox>
            </p:panel>

            <p:panel id="leftMenu1B" rendered="#{leftMenuBean.leftMenu1}" header="East" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="500" widgetVar="panelB">
                <p:selectManyCheckbox value="#{leftMenu1Bean.selectedServersB}" layout="pageDirection">
                    <f:selectItems value="#{leftMenu1Bean.serversB}" />
                </p:selectManyCheckbox>
            </p:panel>

            <p:separator />

            <p:commandButton value="Submit" update="content" rendered="#{leftMenuBean.leftMenu1}" action="#{leftMenu1Bean.getOtherInfo}" />
        </p:panel>
    </p:layoutUnit>

我希望我的页面看起来像这样：http://imgur.com/WVNy27G 请注意，在布局的左侧菜单组件中，只有 id="west" 的布局单元的轮廓是可见的。

感谢您提供的任何建议。太感谢了！

4

0 回答 0