Question

JSF-2.0，Mojarra 2.1.19，PrimeFaces 3.4.1

我需要一个p:panel组件的悬停事件（mouseOver mouseOut）。让我们想象有：

<h:form id="dataTableForm">
    <p:dataTable id="dataTable>
        <p:panel id="hoverPanel">
            <p:commandLink id="button" value="Show" rendered="condition"></p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

我的功能要求告诉我，当鼠标指针在hoverPanel上时，需要显示p:commandLink组件，否则（mouseOut）需要隐藏它。我猜这可以通过设置它的CSS display属性来完成。我不想使用rendered的{{1}}属性，因为它已经有一个，这不应该转到服务器并返回，它必须在客户端完成。

我试过用：

p:commandLink

但这不起作用我也需要......更具体针对每个不同的$('.hoverPanel').hover( alert('mouseOn'); );组件，因为它们包含在hoverPanel中。

Answer 1

您使用了错误的选择器：您在面板上未定义任何类，而是定义了将由命名容器更改的ID。考虑到您的评论，最简单的解决方案是为所需的面板定义一个额外的类。

观点：

<h:form id="form">
    <p:dataTable id="table">
        <p:panel id="hoverPanel" styleClass="base-class #{bean.condition ? 'change-panel' : ''}">
            <p:commandLink id="button" styleClass="btn" value="Show" rendered="condition">
            </p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

用JavaScript完成工作：

$('.change-panel').hover(
    function () {
       $(this).find('.btn').toggleClass('visible');
    }
    //or do your job by binding two function handlers to distinguish between mouse events
);

完整答案

根据你的评论和自我回答，这显然不是最好的工作方式，我会发一个完整的答案。当您决定提出下一个问题并得到答案时，请尽力全面调查您所呈现的代码。此外，沿途学习一些JavaScript / jQuery是明智的。

该视图显示了一个双列数据表，第二列显示了带有所需链接的面板。该表包含所有可能的替代方案，因此请务必为您选择最佳设置。

查看：

<h:head> <h:outputScript name="js/js.js" target="body"/> <style> .invisible { display: none } </style> </h:head> <h:body> <h:form id="form"> <p:dataTable value="#{bean.data}" var="data" id="table" rowIndexVar="index"> <p:column headerText="Data"> <h:outputText value="#{data}"/> </p:column> <p:column headerText="Other functions"> <p:panel id="hoverPanel" styleClass="#{((index eq 0) || (index eq 1) || (index eq 2)) ? 'change-panel' : ''}"> <h:outputText value="Row #{index + 1}"/> <p:commandLink id="button" value="Show" rendered="#{!((index eq 1) || (index eq 3))}" styleClass="btn #{(index eq 0) ? 'invisible' : ''}"/> </p:panel> </p:column> </p:dataTable> </h:form> </h:body>

<强>的JavaScript ：

$(document).ready(function() { $('.change-panel').hover( function () { $(this).find('.btn').toggleClass('invisible'); } ); });

<强>豆：

@ManagedBean @RequestScoped public class Bean implements Serializable { private List<String> data = new ArrayList<String>(); public Q15435267Bean() { data.add("Data element 1"); data.add("Data element 2"); data.add("Data element 3"); data.add("Data element 4"); data.add("Data element 5"); } public List<String> getData() { return data; } public void setData(List<String> data) { this.data = data; } }

Answer 2

首先在commandLink上删除渲染，好像条件为false，你的html上不存在链接：

<h:form id="dataTableForm" prependId="false">
    <p:dataTable id="dataTable" rowIndexVar="index">
        <p:panel id="hoverPanel_#{index}">
            <p:commandLink id="button" value="Show" style="display: none;">             </p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

$("[id$='hoverPanel_1']").hover(
function(){
if'(#{put your condition where it was in render}'=='true'){
$("[id$='button']").show();
   alert('mouseOn');           
}
}, function(){
$("[id$='button']").hide();

}）;

JSF将鼠标悬停添加到面板

2 个答案:

完整答案