以下のテンプレートでウェブサイトを作成しています。
----------------------------------------------------------------
Header
----------------------------------------------------------------
left menu | Content |right menu|
| | |
| | |
| | |
| | |
| | |
----------------------------------------------------------------
Footer
----------------------------------------------------------------
ヘッダーには、ドロップダウン メニューがあります。ドロップダウン メニューからオプションを選択すると、Ajax を使用して左側のメニュー コンポーネントが更新され、チェックボックス アイテムを含む 2 つのパネルが表示されます。以下のリンクのスクリーンショットを参照してください。
アイテムを 1 つ、または何も選択せずに選択して [送信] をクリックすると、レイアウトのコンテンツ コンポーネントが更新され、メッセージが表示されます。
私のウェブサイトは機能的に機能します。レイアウトは問題なく、ドロップダウン メニューが機能し、コンテンツが更新されます。 私の質問は、レイアウトの左側のメニュー コンポーネントにあるネストされたパネルの視覚的に魅力のない効果を取り除く方法です。 画像をよく見ると、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" を持つレイアウト ユニットのアウトラインのみが表示されていることに注目してください。
あなたが提供しなければならないかもしれない提案に感謝します。どうもありがとう！