3

我使用的是 primefaces 3.4，我在 ap:overlaypanel 中有 ap:calendar。当我选择一个日期时，覆盖面板关闭（使用 Google Chrome 时），当我在日历中单击“关闭”时使用 Firefox，覆盖面板也会关闭。

我能做些什么来解决这个问题？

我的代码是这样的：

<p:overlayPanel for="btnOP" hideEffect="fade">

    <p:panel id="panelTest">

      <p:calendar id="calendarOne"  pattern="dd/MM/yyyy HH:mm"
          value="#{bean.value}" showOn="button" validator="dateValidator">
      </p:calendar> 

    </p:panel>

</p:overlayPanel>
4

1 回答 1

0

这可能现在必须解决，但无论如何这是我面对同样问题时的方法。我的标记几乎是相同<div>的（overlayPanel 周围只有一个额外的标记）并且通过一些挖掘我发现了这一点：在 overlayPanel 组件上，您取消绑定鼠标单击，因此它不会原生关闭：

onShow="$(document.body).unbind('mousedown.ui-overlay')"

（来源：点击时不要隐藏 OverlayPanel）

然后，我编写了一些自定义 Javascript 来检查单击事件所针对的元素以及日历组件是否可见，如下所示：

$(document).click(
    function(e) {
        var target = e.target;

        if (!$(target).parents().is('div#overlay-panel') && !$('div#ui-datepicker-div').is(':visible')) {
            $('div.overlay-panel-classname').hide('fade', 100);
        }

    });

结果证明工作顺利（我做了一些其他的改进，但基本上就是这样）。

编辑：

在 hide 事件中，我添加了一个 toggleClass 语句，这样就不会影响触发按钮的行为：

$('div.verlay-panel-classname').hide('fade', 300, function() {
     $(this).toggleClass('ui-overlay-hidden ui-overlay-visible');
});
于 2013-09-16T18:21:22.200 回答