Question

我正在使用JSF 2.0和primefaces 3.3。我想隐藏/显示菜单项上的工具栏。

以下是更多信息。

<p:menubar autoSubmenuDisplay="true" style="width:99%">
                    <p:submenu label="Projects">
                        <p:menuitem id="m11" value="Select Product" actionListener="#{menuBean.renderTool}" update="t1" />
                        <p:menuitem id="m12" value="Select Project" />
                        <p:menuitem id="m13" value="Select Contract" />
                    </p:submenu>
                    <p:menuitem id="m2" value="Global" />

                    <p:menuitem id="m7" value="Exit" />
                </p:menubar>

                <p:toolbar id="t1" rendered="#{menuBean.renderToolbar}">
                    <p:toolbarGroup align="left" style="height:20px;">
                        <h:outputText value="Projects " />
                        <h:outputText value=" - select Product" />
                    </p:toolbarGroup>
                </p:toolbar>

ManagedBean

private boolean renderToolbar = false;
//getters and setters
public void renderTool(ActionEvent actionEvent){
        System.out.println("inside renderTool method...");
        renderToolbar = true;
    }

actionListener方法正在执行但是，它没有更新或渲染工具栏。

Answer 1

您提供的信息不多。

但是，一种方法是使用Javascript和onclick事件处理程序。像这样（未经测试的代码）：

<p:toolbar id="toolbarID" />
<p:menu>
    <p:menuitem onclick="$('#toolbarID').toggle();" />
</p:menu>

我认为primefaces已经包含了jquery，所以你应该能够开箱即用jquery选择器。

Answer 2

为bean添加一些布尔变量

boolean someBoolean; //+ getter/setter

并在renderToolbar方法内添加

someBoolean = !someBoolean; // toggle the disaplay on and off

在xhtml中更改

<p:toolbar id="t1" rendered="#{menuBean.renderToolbar}">

到

<h:panelGroup id="t1">
    <p:toolbar rendered="#{menuBean.someBoolean}">
.
.
.
</h:panelGroup>

Answer 3

Daniel提供的解决方案使用了支持bean。但是，如果显示/显示某些元素不依赖于数据但更多是客户端事物或简单的用户控制元素，我建议不要使用支持bean。使用支持bean作为客户端的东西会导致延迟或正常用户会说：“它很慢”。

使用像Jens建议的JavaScript这样的客户端方面。由于您使用的是PrimeFaces，因此您可以使用jQuery。一个简单的例子来演示jQuery的toggle()，show()和hide()函数：

<h:form>
    <p:menubar>
        <p:menuitem value="Toggle" onclick="$(&quot;[id='t1']&quot;).toggle()" />
        <p:menuitem value="Show" onclick="$(&quot;[id='t1']&quot;).show()" />
        <p:menuitem value="Hide" onclick="$(&quot;[id='t1']&quot;).hide()" />
    </p:menubar>
</h:form>

<p:toolbar id="t1" />

请注意，如果您的p:toolbar位于类似表单的容器中，则客户端ID的前缀为表单的ID。

如何隐藏/显示<p：toolbar> onclick <p：menuitem> </p：menuitem> </p：toolbar>

3 个答案: