在鼠标悬停时渲染一个 jsf 元素答案

【问题标题】：Render a jsf element on mouseover在鼠标悬停时渲染一个 jsf 元素
【发布时间】：2013-02-12 21:42:35
【问题描述】：

我有一个<h:panelGrid> 和一个h:commandLink（链接基本上是一个图像）。现在我希望在 mouseover 事件上，然后链接应该是 render(render='true') 和 mouseout 事件，它被删除 render='false'。
但我无法创建如何使用这些事件执行此操作的逻辑，因为我使用的方法是在此事件上设置 bean true 和 false 的值。
这是我的代码

<h:form>
        <h:panelGrid mouseover='** we cannot call a bean method here which changes the bean value **'>

        This is the Div On which I want to apply mouseover event
        </h:panelGrid>

        <h:commandLink id="btn" render={renderBean.renderLink}>
        <h:graphicImage url="image.jpg"/>
        </h:commandLink>


    </h:form>

renderBean的renderLink属性默认值为false。 现在我想知道如何在鼠标悬停事件中将其值更改为true？ 有可能吗？或 JSF 中符合此要求的任何其他解决方案

【问题讨论】：

在onmouseover/onmouseleft 事件中显示/隐藏链接的动机是什么？请说明您的功能要求以获得更好的指导。

标签： jsf jsf-2

【解决方案1】：

您必须记住，在 JSF 中，页面将首先由 Web 服务器中的 JSF 引擎在服务器端进行处理。那时所有的 JSF 标记都将被转换成它们的 HTML 等价物。 render 属性告诉服务器端引擎是否输出 HTML a（锚）链接来代替 <h:commandLink> 元素。

您正在寻找的行为，即响应鼠标事件，是客户端功能。它发生在浏览器中，而不是 Web 服务器中，因此不涉及 JSF。解决方案是在 JavaScript 而不是 JSF 中处理鼠标事件。您通常会在名为btn 的id 上设置（或删除）CSS 属性display:none（不幸的是，它稍微复杂一些，因为JSF 会稍微破坏元素id）。 StackOverflow 上有很多关于如何在 JavaScript 中处理客户端事件的帖子。例如，使用 jQuery 是一种非常常见的方法。

我建议您首先查看我们最好的 JSF 资源之一和 StackOverflow 的长期用户 BalusC 的博客：http://balusc.blogspot.com。

有很多东西要学，你可以先去那里（并在 SO 上搜索他的帖子），从而获得一个良好的开端。

祝你好运。

【讨论】：