JSF将悬停添加到面板中

JSF adding hover to a panel

本文关键字：添加 悬停 JSF      更新时间：2023-09-26

JSF-2.0，Mojarra 2.1.19，PrimeFaces 3.4.1

我需要p:panel组件的悬停事件(mouseOver-moseOut(。让我们想象一下：

<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中。

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

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

您首先删除commandLink上的render，就好像条件为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();

})；

相关文章：