5

私はprimefaces selectOneButtonを使用しています。その selectOneButton のいくつかのボタンを、バッキング Bean の値に応じて他のボタンとは異なるスタイルにしたいと考えています。たとえば、selectOneButton の 3 つのボタンのテキストは太字にする必要があり、残りのボタンは通常のテキストにする必要があります。

出来ますか？

プライムフェイス 3.2

4

4 に答える 4

9

これは私がそれを作った方法です：

styleClass を selectOneButton に追加します。

<p:selectOneButton styleClass="yourStyleClass" value="#{yourBean.yourValue}" > ...

そして、スタイルシートでは、次のようにレンダリングされたボタンを取得できます（各ボタンにアイコンを追加しました-好きなことをしてください）：

.yourStyleClass div:first-child span {
    background-image: url('logo.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(2) span {
    background-image: url('picture.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(3) span {
    background-image: url('video.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}
于 2012-11-30T20:37:39.597 に答える
3

これを行う「標準的な」方法はありません。一般的な回避策は、スタイルが異なる複数の要素(あなたの場合) を持ち、属性をSelectItem持つ式を使用して、どの要素が表示されるかを判断することです。renderedこれは、primefaces だけでなく、あらゆるコンポーネント ライブラリで機能します。

EDIT：今それを試してみました - selectitems のスタイリングにまったく影響を与えられないように見えます - 少なくともページで宣言的にではありません。テーマを微調整するか、ルールを使用してカスタム スタイルで primefaces セレクターをオーバーライドしてみてください!important。ただし、selectitem の明確なスタイル設定は得られません。

ですから、私の以前の自信を許して、この答えを「いいえ、できません」と見なしてください。

于 2012-06-08T13:19:10.313 に答える
2

OK、私はこれをテストしていませんが、Primefaces Request Context でできると確信しています。このリンクを参照してください: RequestContext

これにより、バッキング Bean からクライアント側の JavaScript を実行できます。

したがって、バッキング Bean でどのボタンを変更する必要があるかを判断し、jquery の addClass 関数を使用する JS 関数を呼び出して、スタイルを設定する必要があるボタンに CSS クラスを追加します。

頭の中では十分に単純に思えますが、今はテストする時間がありません。

于 2012-06-14T03:32:00.530 に答える
0

Jqueryで試すことができます!!

<p:selectOneButton value="#{selectOneView.productViewOption}" styleClass="product-view">
    <f:selectItem itemLabel="" itemValue="Xbox One" />
    <f:selectItem itemLabel="" itemValue="PS4" />
    <f:selectItem itemLabel="" itemValue="Wii U" />
</p:selectOneButton>
<script type="text/javascript">
    $('.product-view div:nth-child(1) span').addClass('fa fa-list fa-2x');
    $('.product-view div:nth-child(2) span').addClass('fa fa-star fa-2x');
    $('.product-view div:nth-child(3) span').addClass('fa fa-th fa-2x');
</script>
于 2015-07-17T02:37:38.467 に答える