0

我们的代码生成了几个<div>框（带有自定义标签own:resourceDiagramElement）。现在我们尝试为每个<div>框绑定一个具有以下两种行为的覆盖面板：

  1. 如果鼠标在<div>框/元素上移动，则 OverlayPanel 应显示有关框/元素的一些详细信息<div>。如果鼠标移出<div>框外，则应隐藏 OverlayPanel。

  2. 如果您单击一个<div>框/元素，则应显示 OverplayPanel 并保持打开状态，直到您再次单击该<div>框/元素。就像您单击了<div>框一样，如果鼠标移出<div>框范围，则不会发生任何事情。

基本上源代码看起来是这样的：

<c:forEach items="#{resourceStateDiagramViewBean.graphicalResources}" var="resource1">

<own:resourceStateDiagramElement id="#{resource1.id}"
onClick="alert('alert')" top="#{resource1.top}"
left="#{resource1.left}" width="#{resource1.width}"
height="#{resource1.height}" styleClass="#{resource1.styleClass}"
showText="#{resourceStateDiagramViewBean.showText}" />
...
<p:overlayPanel id="panel_#{resource1.id}" for="#{resource1.id}" 
showEvent="mouseover OR mouseclick" hideEvent="mouseleave OR mouseclick" >
...
</c:forEach>

我们的自定义标签<own:resourceStateDiagramElement>生成 html 代码，例如：

<div id="facility_01" class="resource-element-default" style="top:1%; 
left:2%; width:5%; height:2%;">

这意味着这hideEvent应该取决于面板显示的方式/事件......我们尝试绑定和取消绑定<div>元素上的事件，但看起来 primesfaces 事件覆盖了这个自己的绑定。

我们怎样才能做到这一点？

4

1 回答 1

0

我找到了一个可行的解决方案。我用null定义了 showEvent 和 hideEvent 。... ... ... Bean 方法 GetJavascriptsForOverlayPanel 生成以下 Java Script 代码：

    <script id="facility_01_script" type="text/javascript"> 


    var facility_01_useMouseLeaveEnter_Event = true;
    var facility_02_useMouseLeaveEnter_Event = true;
    var facility_0X_useMouseLeaveEnter_Event = true;
    ...

    window.onload = function () {   
        $("#facility_01").bind('click',function(){
            if (facility_01_useMouseLeaveEnter_Event) {
                widget_panel_facility_01.show();
                facility_01_useMouseLeaveEnter_Event = false;
            }else {
                widget_panel_facility_01.hide();
                facility_01_useMouseLeaveEnter_Event = true;
        }});

        $("#facility_01").bind('mouseenter',function(){
            if (facility_01_useMouseLeaveEnter_Event) {
                widget_panel_facility_01.show();
        }});

        $("#facility_01").bind('mouseleave',function(){
            if (facility_01_useMouseLeaveEnter_Event) {
                widget_panel_facility_01.hide();
        }});


        $("#facility_02").bind('click',function(){
            ...
        }});

        $("#facility_02").bind('mouseenter',function(){
            ...
        }});

        $("#facility_02").bind('mouseleave',function(){
            ...
        }});        

        ...
         < code for facility_0X element >

    };
</script>

有了这个，我得到了可接受的解决方案。不幸的是，不可能同时打开两个 OverlayPanel。只要您尝试打开第二个面板。第一个将被关闭。OverplayPanel 的这种默认行为可以吗？

于 2013-08-30T13:22:02.410 回答