是否有可以关闭 primefaces 覆盖面板的 java 命令？答案

【问题标题】：Is there a java command that can close a primefaces overlay panel?是否有可以关闭 primefaces 覆盖面板的 java 命令？
【发布时间】：2012-03-22 14:00:40
【问题描述】：

是否有可以关闭 primefaces 覆盖面板的 java 命令？或者有没有办法让覆盖面板内的按钮在单击按钮时关闭面板？

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

您可以轻松地在覆盖面板中添加一个按钮来关闭它，例如

<p:overlayPanel widgetVar="myOverlayPanel" ... >
  <p:commandButton ... onComplete="PF('myOverlayPanel').hide(); ... />
</p:overlayPanel>

你也可以在 Java 中做到这一点

private void doSomething() {
  RequestContext ctx = RequestContext.getCurrentInstance();
  ctx.execute("PF('myOverlayPanel').hide();");
}

【讨论】：

这个解决方案在 PF 6.2 中对我有用，除了我必须使用 onclick 事件而不是 onComplete。

【解决方案2】：

我发现（至少在 PrimeFaces 7.0 中）p:commandButton 仅更新表单或覆盖面板之外的任何组件将关闭覆盖面板。例如，

<p:commandButton value="Close" update="myform" />

我唯一担心的是，我找不到具体解释或为什么会发生这种情况的文档，所以我有点犹豫是否要依赖它。另一方面，它似乎比onclick="PF('panelWidgetVar').hide();" 做得更干净，后者往往会清空我的浏览器窗口并重新绘制整个页面，而单独的update 似乎只刷新了我需要更新的页面部分。

【讨论】：

【解决方案3】：

把它放在 p:overlayPanel 标记中，并使用 overlayPanel id 设置 p:effect 'for' 属性，使用 appendToBody=true。

 <p:commandLink styleClass="ui-icon ui-icon-triangle-1-e">
        <p:effect type="slide"  for="idOverlayPanel" event="click">
            <f:param name="mode" value="'hide'"/>
            <f:param name="direction" value="'right'"/>
        </p:effect>
    </p:commandLink>

无效果参数

<p:commandLink styleClass="ui-icon ui-icon-close" >
    <p:effect type="slide"  for="idOverlayPanel" event="click"/>
</p:commandLink>

您可以将幻灯片效果更改为另一个，图标样式类。

对不起我的英语不好

【讨论】：

【解决方案4】：

我已经用 jQuery 和 css 完成了这项工作。请检查以下代码

<p:overlayPanel widgetVar="overlay" showEffect="blind" showCloseIcon="true" styleClass="lane-overlay" dynamic="true" dismissable="true" hideEffect="blind">
<script>
$(document).ready(function(){
$(".closeIcon").click(function(){
$(".lane-overlay").hide();
});
});
</script>
<p:commandButton value="close"  styleClass="closeIcon"/>
`enter code here`

【讨论】：

【解决方案5】：

怎么样（我自己还没有测试过）

仅客户端解决方案

<p:commandButton id="basic" onclick="jQuery('#IdOfThePanel').hide()"></p:commandButton>

或客户端+服务器端

jsf:

<p:commandButton value="Save" actionListener="#{myBean.doSomething}"/>

java:

public void doSomething(ActionEvent actionEvent) {

    RequestContext context = RequestContext.getCurrentInstance();
    context.execute("jQuery('#IdOfThePanel').hide()");
}

看看这里从java执行js

Executing Javascript from Server Side

p.s 可能您必须添加一些前缀，例如 formID:IdOfThePanel... 而不是 IdOfThePanel... 取决于您的情况...

编辑：而不是jQuery('#IdOfThePanel').hide()，只需使用panelWidgetVar.hide() 或在更新的PrimeFaces 版本中，PF('panelWidgetVar').hide()

【讨论】：

overlayPanelWidgetVar.hide() 会更容易使用。