Question

我正在使用primefaces 3.4，我在p：overlaypanel里面有一个p：calendar。当我选择日期时，overlaypanel会关闭（使用Google Chrome时）当我在日历中单击“关闭”时使用Firefox时，overlaypanel也会关闭。

我该怎么做才能解决这个问题？

我的代码是这样的：

<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>

Answer 1

这可能现在必须解决，但无论如何这是我面对同样问题的方法。我的标记几乎完全相同（在overlayPanel周围只有一个额外的<div>）并且通过一些挖掘我发现了这一点：在overlayPanel组件上解除鼠标点击以便它不会本地关闭：

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

（资料来源：Don't hide OverlayPanel on click）

然后，我编写了一些自定义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');
});

OverlayPanel + Calendar + Primefaces

1 个答案: