3

我的网页上有一个 svg。右键单击元素时应显示一个上下文菜单，其中包含从数据库中获取的数据。元素的编写方式是右键点击事件触发页面上的一个js函数。我需要从 java 脚本调用上下文菜单。有人可以帮我解决这个问题。我已经被这个问题困扰了将近 3 天。元素：

<rect/><text>L</text></g><g id="118" onmousedown="RightClickExecute(event,118)">

java脚本：

function RightClickExecute(event, id) {
   if (event.button == 2) {document.getElementById("myForm:selectedEntityid").value = id;
      document.getElementById("myForm:selectedObjectType").value = 'Entity';
      document.getElementById("myForm:RightAction").click();
   }
}
function showContextMenu(){                                  
   document.getElementById("myForm:contextMenuItemId").click();
 }

XHTML：

<p:contextMenu id="contextMenuId" for="svgContainerPanel"
                widgetVar="contextMenuVar" rendered="#{myBean.objectType=='Entity' ? true : false}">
                <p:menuitem id="contextMenuItemId" ></p:menuitem>
</p:contextMenu>

<p:contextMenu event="click" id="contextMenu2Id" for="contextMenuId"
                widgetVar="contextMenu2Var" model="#{my.model}" >

                </p:contextMenu>

<p:commandButton id="RightAction" style="visibility:hidden"
                action="#{myBean.populateMenu}" ajax="true"
                type="submit" oncomplete="showContextMenu()"
                update="contextMenuId,contextMenu2Id">
            </p:commandButton>

<h:inputHidden id="selectedEntityid"
                value="#{myBean.selectedEntityId}">
            </h:inputHidden>
<h:inputHidden id="selectedObjectType"
                value="#{myBean.objectType}">
            </h:inputHidden>
4

1 回答 1

3

Primefaces 的 contextMenu 没有选择，所以你可以使用 jquery 来做到这一点。如果要显示 contextMenu，则必须将 contextMenu 的位置更改为鼠标的位置（默认情况下页面加载 contextMenu，但它有 css display:none，因此您需要更改 css）。Primefaces 的 contextMenu 具有在客户端中使用的 widgetvar 属性（它有方法 show 来显示它）。

Primefaces's contextMenu有widgetvar在客户端使用的属性（它有方法 show 来显示它）。

例如，当鼠标悬停在一个组件上时，你会显示 contextmenu，它的 id 是rongnk，我有一个 form(id:form)，一个 contextmenu(id:xxx)

            <script type="text/javascript">
                //<![CDATA[
                $(document).on('mouseover', '#form\\:rongnk', function(e) {
                    $(PrimeFaces.escapeClientId('form:xxx')).css({
                        top: e.pageY+'px',
                        left: e.pageX+'px'                        
                    }).show();
                });                
                //]]>
            </script>
于 2013-05-08T16:53:44.350 回答