0

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）它需要被隐藏。display我猜这可以通过设置它的 CSS属性来完成。我不想使用rendered属性 ofp:commandLink因为它已经有一个，这不应该需要去服务器然后回来，它必须在客户端完成。

我试过使用：

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

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

4

2 回答 2

2

您使用了错误的选择器：您没有在面板上定义类，而是定义了将由命名容器更改的 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;
    }

}
于 2013-03-15T16:09:53.443 回答
0

您首先删除 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();

});

于 2013-03-15T16:17:44.103 回答