5

Primefaces で JSF を使用しています。画像のみのラジオボタンのボタンセットを使用したいのですが、うまくいきません。

コードは次のとおりです。

    <p:selectOneButton value="#{LoginBean.user}" >  
        <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg1.png?ln=img&quot;/&gt;" itemValue="1"/>
        <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg2.png?ln=img&quot;/&gt;" itemValue="2"/>
    </p:selectOneButton>

「escape」、「escapeItem」、さらには「itemEscaped」属性で文字をエスケープしようとしました。this other questionの最後のものについて読みました。その質問の解決策では<h:selectOneRadio>、 ではなくを使用し<p:selectOneButton>ます。

注： jQueryUIbuttonset()メソッド（Primefacesはバックグラウンドで使用）を使用して動作することはわかっているため、スクリプトの問題ではありません..

それで、これを行うことは可能<p:selectOneButton>ですか？

ありがとう！

4

2 に答える 2

6

実際、 のレンダラーは<p:selectOneButton>ラベルの HTML を考慮していません。最善の策は、代わりに CSS 背景画像として設定することです。

与えられた

<p:selectOneButton ... styleClass="buttons">

:nth-child()CSS3疑似セレクターを使用して個々のボタンのスタイルを設定できます

.buttons .ui-button:nth-child(1) {
    background: url("#{resource['img/myImg1.png']}") no-repeat;
}
.buttons .ui-button:nth-child(2) {
    background: url("#{resource['img/myImg2.png']}") no-repeat;
}

ただし、それをサポートしていないブラウザー (特定の IE バージョン) をターゲットにしている場合は、JS/jQuery を介してジョブを実行することはできません。

$(".buttons .ui-button:eq(0)").css("background", "url('resources/img/myImg1.png') no-repeat");
$(".buttons .ui-button:eq(1)").css("background", "url('resources/img/myImg2.png') no-repeat");

具体的な問題とは関係ありませんが、リソースの使用方法libraryは完全に正しくありません。JSF リソース・ライブラリーの目的と使用方法をよくお読みください。それについてもっと学ぶために。

于 2013-01-10T20:29:31.180 に答える