0

私はprimefacesを使用しています。私の画面では<p:tooltip> 、マウスカーソルが日付フィールドにある場合、残りの日数を計算して表示する必要があります。これを行う方法 ？ツールチップのイベントはありますか？

4

2 に答える 2

1

関連する PrimeFaces イベントはありませp:tooltipんが、Javascrip/jQuery を使用して a の遅延読み込みをシミュレートできますp:tooltip。

<h:form id="form">
    <p:commandButton id="button" value="button" />
    <p:tooltip for="button" id="tooltip">
        <p:outputPanel id="tooltip-content-wrapper">
            <h:outputText value="#{bean.tooltipContent}"
                rendered="#{bean.tooltipVisible}" />
        </p:outputPanel>
    </p:tooltip>
    <p:remoteCommand name="loadTooltip"
        action="#{bean.loadTooltipContent}" update="tooltip-content-wrapper" />
</h:form>
<script type="text/javascript">
$("[id='form:button']").on("mouseover", function() { loadTooltip(); });
</script>

そしてバッキングビーン：

public class Bean
{
    private boolean tooltipVisible = false;
    private String tooltipContent = "test";

    public void loadTooltipContent()
    {
        tooltipVisible = true;
    }
}
于 2012-12-13T09:25:39.417 に答える
0

<p:toolTip/>showEvent表示 ( ) と非表示 ( ) を制御する JavaScript イベントを定義しhideEvent、両方のデフォルトをmouseoverそれぞれ とに設定しmouseoutます。両方に基づいて、技術的には必要なものを表示できます（できればjavascriptを介して）

JavaScriptルートに行かない場合は、次のことができます

  1. title日付フィールドを定義し、バッキング Bean 変数にバインドします

        <h:inputText id="theDate"  value="#{bean.date}" title="#{bean.daysLeft}"/>

  2. ツールチップを追加

         <p:tooltip id="theToolTip" for="theDate"/>

  3. 入力フィールドの ajax イベントを介して、タイトルを更新し、ツールチップによって自動的にピックアップされるようにします

         <h:inputText id="theDate"  value="#{bean.date}" title="#{bean.daysLefy}">
        <p:ajax event="blur" listener="#{bean.someMethodToUpdateDaysLeft}" update="theDate,theToolTip" execute="theDate"/>
     </h:inputText>
于 2012-12-13T09:15:57.100 に答える