Primefaces工具提示单星级评级

时间：2013-03-26 19:11:16

标签： css user-interface primefaces

我想知道是否可以使用Primefaces为评级中的每一颗星实现工具提示提供一些帮助。到目前为止，我的工具提示适用于整个评级块，因此所有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>

Anywho，感谢任何帮助，感谢您的时间。

2 个答案:

答案 0 :(得分：2)

我也有类似的要求而且我已经落到了这个SO而且我很惊讶地看到即使在3年之后也没有被接受的答案！

Primefaces（版本6.0）仍然没有此功能。我希望它会在下一个版本中添加。

经过一番搜索后，我终于创建了一个自定义复合组件。

这是我的解决方案/解决方法。这是优雅与否，我留给你:)。

顺便说一句，这适用于JSF 2.2。对于旧版本的JSF，您可能需要添加更多文件才能使复合组件正常工作。（taglibs等）。

首先，我们必须创建自己的复合组件进行评级（别担心，它只是两个文件）。它只是p:rating和p:tooltip组合在一起。以下是两个文件：

  1. 的 ratingComposite.xhtml
  2. 的 ratingComposite.js

    3. 将这两个文件添加到项目的JSF资源文件夹中。         （注意：customizeprimefaces是您的资源库名称）

    <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文件中发生的事情的粗略解释：

    1. 按管道（|）拆分p:tooltip元素值并保存 array（tooltipTxt），用于保存每个管道分隔的工具提示 页面中显示<cp:ratingComposite/>。该数组由评级组件ID索引。
    2. 为每个明星绑定一个自定义 hoverIn 和 hoverOut 事件处理程序 你的评级组件。
    3. 在 hoverIn 上，从数组中获取消息（ tooltipTxt ）（在与当前悬停的星形相对应的索引处）并替换为<p:tooltip> 信息。 在当前悬停的星标位置显示<p:tooltip>消息。
    4. 在 hoverOut 上，只需隐藏<p:tooltip>消息。

      5. <强> 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);
        }

}

      我希望这会有所帮助。

答案 1 :(得分：1)

使用<h:outputText value="1 Star:Abysmal:" title="1 Star: Abysmal"/>

相关问题
最新问题