javascript - JSF 将悬停添加到面板

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 属性来完成。我不想使用 p:commandLink 的 rendered 属性，因为它已经有一个，并且不需要转到服务器并返回，它必须完成在客户端。

我尝试过使用:

$('.hoverPanel').hover(
   alert('mouseOn');           
);

但这不起作用，我也需要某物。对于每个不同的 hoverPanel 组件更加具体，因为它们包含在 p:dataTable 中。

Answer 1

您使用了错误的选择器:您在面板上没有定义类，而是定义了将由命名容器更改的 id。考虑到您的评论，最简单的解决方案是为所需的面板定义一个附加类。

View :

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

完整答案

根据您的评论和给出的 self 回答，这显然不是完成这项工作的最佳方式，我将发布完整的答案。当您决定提出下一个问题并获得答案时，请尽力全面研究您所提供的代码。另外，在此过程中学习一些 JavaScript/jQuery 也是明智之举。

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

查看:

<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');
        }
    );
});

bean :

@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;
    }

}