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>

うまくいくようです。ご覧のとおり、アイコンのサイズを小さくする必要がありました。そうしないと、大きすぎます。

いくつかのメモ:

  • コンポジットは、ヘルプ アイコンとフィールドの両方をラップしません。ヘルプ アイコンのみをラップします。これには、3 列のレイアウトが必要になることと、フィールドのすぐ隣にヘルプ アイコンが表示されないという欠点があります。代わりに、独自の列に表示されます。まさに私が欲しかったものではありません。

  • ヘルプ テキストは属性で伝達されます。<p:panel>これには、宛先であるが HTML マークアップを喜んで受け入れるという事実に関係なく、HTML マークアップを含めることができないという欠点があります。

  • 属性を使用してヘルプ アイコンを省略できますshowが、3 列のレイアウトの<customC:fieldhelp>ため、フィールドごとに が常に存在する必要があります。これは非常に不器用ですが、これも私の知識不足の結果です。:-(

自分よりも JSF/PrimeFaces をもう少し知っていれば、改善できると確信しています。

編集

<h:panelGroup>アイコンを (独自の列ではなく) 入力フィールドのすぐ横に配置する場合は、タグが必要です。このタグで要素のグループをラップすると<p:panelGrid>(またはその兄弟 : <h:panelGrid>)、単一の要素としてカウントされます。つまり、1 つのセルのみを占有します。このようなもの：

<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>

さらにvertical-align: middle、アイコンを残りの部分と垂直方向に揃えるために、CSS を微調整する必要がありました。

于 2013-08-16T13:19:15.227 に答える