我想知道是否可以使用 Primefaces 为收视率中的每颗星实现工具提示方面的帮助。截至目前，我的工具提示适用于整个评级 block ，因此所有 5 星本质上都具有相同的工具提示。有谁知道有一种优雅的方法可以为每颗星星应用不同的工具提示吗？与我共事的一些人建议使用 onHover() 之类的状态来在所有其他方法都失败时执行此操作(以一种相当蛮力的方式)，但如果可能的话，我想更优雅地执行此操作。
这是当前代码，它有一个工具提示，当任何星星悬停在上面时会弹出。
<h:outputLabel for="developerScore">Developer Score:</h:outputLabel>
<p:rating value="#{scoreCard.developerScore}" stars="#{uiSettingsBean.ratingMax}" cancel="false" readonly="#{otherReadOnly}" id="developerScore">
<p:tooltip for="developerScore" showEffect="fade" hideEffect="fade" >
<h:outputText value="Developer Score Rubric"/><br />
<h:outputText value="1 Star: Abysmal"/><br />
<h:outputText value="2 Star: Needs Improvement"/><br />
<h:outputText value="3 Star: Doing Good"/><br />
<h:outputText value="4 Star: Above Average"/><br />
<h:outputText value="5 Star: Exceptional"/>
</p:tooltip>
</p:rating>
感谢任何人的帮助，感谢您的宝贵时间。
最佳答案
我也有类似的要求，我找到了这个 SO，我惊讶地发现即使在 3 年后也没有被接受的答案!
Primefaces(version 6.0) 还没有这个功能。我希望它会在下一个版本中添加。
经过大量搜索，我终于创建了一个自定义复合组件。
这是我的解决方案/解决方法。它是否优雅，我留给你:)。
顺便说一下，这在 JSF 2.2 中有效。对于旧版本的 JSF，您可能需要添加更多文件才能使复合组件正常工作。(taglibs 等)。
首先，我们必须创建自己的评级复合组件(别担心，它只是两个文件)。它只不过是 p:rating和 p:tooltip结合在一起。以下是两个文件:
- ratingComposite.xhtml
- ratingComposite.js
将这两个文件添加到元素的 JSF 资源文件夹中。 (注意:customizedprimefaces是你的资源库名称)
<YourWarFile>\resources\customizedprimefaces\ratingComposite.xhtml
<YourWarFile>\resources\js\ratingComposite.js
(如果您不熟悉复合组件及其路径，那么我建议先研究一下，在 JSF 2.2 中会变得很容易。)
并开始在您的页面中使用它。
myPage.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"*
xmlns:cp="http://java.sun.com/jsf/composite/customizedprimefaces"
>
...
<cp:ratingComposite id="ratingId" widgetVar="ratingIdWgt"
stars="4"
value="#{bean.rating}"
tooltipValue="Ugly | Bad | OK | Good"
/>
(注意 xmlns 包括:xmlns:cp="http://java.sun.com/jsf/composite/customizedprimefaces")
这与 p:rating 相同唯一不同的组件是 tooltipValue 属性，该属性接受管道分隔的工具提示消息，其顺序与评级中的星级相对应。
这里是对 javascript 文件中发生的事情的粗略解释:
- 拆分
p:tooltip通过管道(|)元素值并保存在 array(tooltipTxt)，它保存每个管道分隔的工具提示<cp:ratingComposite/>在页面中。该数组由评级组件 ID 索引。 - 为中的每个星星绑定(bind)一个自定义的 hoverIn 和 hoverOut 事件处理程序 你的评分部分。
- 在 hoverIn 上，从数组 (tooltipTxt) 获取消息(在与当前悬停的星相对应的索引处)并替换为
<p:tooltip>信息。 显示<p:tooltip>在当前悬停的星星位置的消息。 - 在 hoverOut 上，只需隐藏
<p:tooltip>消息。
ratingComposite.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="id" />
<composite:attribute name="value" />
<composite:attribute name="readonly" />
<composite:attribute name="widgetVar" />
<composite:attribute name="stars" type="java.lang.Integer" />
<composite:attribute name="tooltipValue"
shortDescription="A pipe(ie.:|) seperated list of tooltip messages. \nEach message in list corresponds to a star in the rating componant." />
<!-- Add other attributes of p:rating component here. -->
</composite:interface>
<composite:implementation>
<h:outputScript name="js/ratingComposite.js" target="head" />
<script type="text/javascript">
<!--
$(document).ready(function(){
rating.init('#{cc.namingContainer.clientId}:_#{cc.attrs.id}', '#{cc.namingContainer.clientId}:_#{cc.attrs.id}-ttId');
});
//-->
</script>
<p:rating id="_#{cc.attrs.id}" widgetVar="#{cc.attrs.widgetVar}"
readonly="#{cc.attrs.readonly}"
value="#{cc.attrs.value}" stars="#{cc.attrs.stars}" />
<p:tooltip id="_#{cc.attrs.id}-ttId" for="_#{cc.attrs.id}" trackMouse="true"
value="#{cc.attrs.tooltipValue}" />
</composite:implementation>
</html>
ratingComposite.js
rating = {
tooltipTxt:{},
init:function(ratingId, tooltipId){
var ratingIdjq = PrimeFaces.escapeClientId(ratingId);
var tooltipIdjq = PrimeFaces.escapeClientId(tooltipId);
var _self = this;
this.tooltipTxt[tooltipId] = $(tooltipIdjq).find(".ui-tooltip-text").html(),
$(ratingIdjq).find(".ui-rating-star").each(function(){
$(this).hover(function(event){return _self.hoverIn(event,tooltipId)},
function(event){$(tooltipIdjq).hide();} //This is on Hoverout
);
});
},
hoverIn:function(event, tooltipId){
var tooltipIdjq = PrimeFaces.escapeClientId(tooltipId);
var ratingArray = this.tooltipTxt[tooltipId].split("|");
var tooptipDiv = $(tooltipIdjq);
tooptipDiv.show();
this.setCoordinate(tooptipDiv, event.pageX, event.pageY);
var currEleIndx = $(event.currentTarget).parent().find(".ui-rating-star").index(event.currentTarget);
var currTooltip = ratingArray[currEleIndx].trim();
tooptipDiv.find(".ui-tooltip-text").html(currTooltip);
},
setCoordinate:function(tooptipDiv, x, y){
var pos = {"left":x, "top":y};
tooptipDiv.offset(pos);
}
}
希望对您有所帮助。
关于css - Primefaces 单星评分工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15645450/