3

我想创建input-field-attached-tooltip-button（我不太清楚该怎么称呼它）。像这样的东西：

我想要的例子

当您将鼠标悬停在问号图标上时，您会看到帮助文本。

理由：这个小图标清楚地表明该领域有帮助。您可以看到帮助确实可用，甚至无需将鼠标指针移动到该字段。给用户这种温暖模糊的感觉。

我无法弄清楚如何在 PrimeFaces 中做到这一点。

我不知道哪个框架产生了上面的例子，但我很确定它不是 PrimeFaces。

我很清楚，<p:tooltip>但我认为它不能做到这一点。

4

1 回答 1

3

所以这就是我在 PrimeFaces 中提出的：

我的例子

（我的屏幕截图不显示鼠标指针）

我几乎接受了 BalusC 的建议并创建了一个 JSF 自定义组件。这是我的自定义组件的样子：

<?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:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">


    <composite:interface>
        <composite:attribute name="helptext"/>
        <composite:attribute name="show" />
    </composite:interface>

    <composite:implementation>
        <p:button id="help" style="width: 15px; height: 15px" icon="ui-icon-help" rendered="#{cc.attrs.show}"/>
        <p:overlayPanel for="help" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade" >
            <p:panel>
                #{cc.attrs.helptext}
            </p:panel>
        </p:overlayPanel>

    </composite:implementation>
</html>

生成上述屏幕截图的 xhtml 如下所示：

<h:form>
    <p:panelGrid columns="3" styleClass="noBorders">

        <p:outputLabel for="mydate" value="Date"  />
        <p:calendar id="mydate"  pattern="yyyy/MM/dd" />
        <customC:fieldhelp helptext="Help text for date field." show="true" />

        <p:outputLabel for="myboolean" value="Send now ?" />
        <p:selectBooleanCheckbox id="myboolean" />
        <customC:fieldhelp helptext="Help text for boolean field." show="false"/>

        <p:outputLabel for="mypwd" value="Your password" />
        <p:password id="mypwd" size="30" />
        <customC:fieldhelp helptext="Help text for password field." show="true"/>

    </p:panelGrid>
</h:form>

似乎工作正常。如您所见，我必须减小图标的大小，否则它会太大。

一些注意事项：

  • 复合不会同时包含帮助图标和字段。它只包含帮助图标。这样做的缺点是您需要三列布局，并且帮助图标不会显示在字段旁边。相反，它显示在自己的列中。不完全是我想要的。

  • 帮助文本在属性中传送。这样做的缺点是它不能包含任何 HTML 标记，而不管目标 .<p:panel>是否乐意接受 HTML 标记。

  • 您可以使用该属性省略帮助图标show，但是 - 由于三列布局 -<customC:fieldhelp>每个字段始终需要存在。这很笨拙，但又是我缺乏知识的结果。:-(

我敢肯定，如果一个人比我自己了解更多 JSF/PrimeFaces，它可以得到改进。

编辑

如果您希望图标位于输入字段旁边（而不是在其自己的列中），那么您将需要该<h:panelGroup>标签。您可以在此标记中包装一组元素，并且<p:panelGrid>（或其兄弟 : <h:panelGrid>）然后将其计为单个元素，即仅占用一个单元格。像这样的东西：

<h:form>
    <p:panelGrid columns="2" styleClass="noBorders">

        <p:outputLabel for="mydate" value="Date"  />
        <h:panelGroup>
            <p:calendar id="mydate"  pattern="yyyy/MM/dd" />
            <customC:fieldhelp helptext="Help text for date field." show="true" />
        </h:panelGroup>

        <p:outputLabel for="myboolean" value="Send now ?" />
        <h:panelGroup>
            <p:selectBooleanCheckbox id="myboolean" />
            <customC:fieldhelp helptext="Help text for boolean field." show="false"/>
        </h:panelGroup>

        <p:outputLabel for="mypwd" value="Your password" />
        <h:panelGroup>
            <p:password id="mypwd" size="30" />
            <customC:fieldhelp helptext="Help text for password field." show="true"/>
        </h:panelGroup>

    </p:panelGrid>
</h:form>

此外，我必须进行一些 CSS 调整，vertical-align: middle以使图标与其余部分垂直对齐。

于 2013-08-16T13:19:15.227 回答