Question

我正在创建一个包含以下模板的网站。

----------------------------------------------------------------
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”的布局单元的轮廓。

我感谢您提供的任何建议。非常感谢你！

显示jsf面板而没有嵌套组件的视觉效果

0 个答案: