我正在尝试实现鼠标悬停在一行上时出现的 ContextMenu。我能够在选定行上实现上下文菜单,但找不到悬停事件。我是否必须为数据表编写自己的实现,或者有没有办法将上下文菜单附加到悬停事件?
问问题
2369 次
1 回答
1
Primefaces 的 contextMenu 没有选择,所以你可以使用 jquery 来做到这一点。如果要显示 contextMenu,则必须将 contextMenu 的位置更改为鼠标的位置(默认情况下页面加载 contextMenu,但它具有 css display:none
,因此您需要更改 css)。
Primefaces's contextMenu
有widgetvar
在客户端使用的属性(它有方法 show 来显示它)。
我的解决方案是:当鼠标悬停在行上时,它会触发显示菜单,当鼠标移出时,它将菜单的 css 更改为display:none
. 例如:我有一个表格(id:form),一个数据表(id:cars,数据区有默认后缀id是_data
,这种情况数据区有cars_data),一个contextMenu(id:xxx)(你可以设置鼠标悬停并通过mouseover
和鼠标在jquery中移出mouseout
)
<h:form id="form">
<p:contextMenu id="xxx" widgetVar="men">
<p:menuitem title="zzzz" value="xxx">
</p:menuitem>
</p:contextMenu>
<style type="text/css">
.testcss{
display: none !important;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(document).on('mouseover', '#form\\:cars_data', function(e) {
$(PrimeFaces.escapeClientId('form:xxx')).css({
top: e.pageY+'px',
left: e.pageX+'px'
}).show();
});
$(document).on('mouseout', '#form\\:cars_data', function(e) {
$(PrimeFaces.escapeClientId('form:xxx')).attr('style','display:none');
});
//]]>
</script>
<p:dataTable id="cars" >
...
</p:dataTable>
</h:form>
于 2013-05-08T17:15:04.017 回答