0

JSF2.1を使用してWebアプリケーションをコーディングしています。2つのボタンを使用して、パラメータを渡す2つの異なるビューに移動したいと思います。ただし、デフォルトでは1つのボタンが「押されている」ため、ビューでは「押されている」必要があります。この種の行動をどのように示すことができますか？これが私が2つのボタンを持っている小さなコードです：

                                    <h:outputLabel value="Color:" />
                                    <!--blue button is highlighted as pressed by default -->
                                    <h:commandButton  value ="blue" action="#{bean.update}" >
                                        <f:setPropertyActionListener target="#{bean.color}" value="blue" />
                                    </h:commandButton>

                                    <!--green button is highlighted as pressed when clicked -->
                                    <h:commandButton value ="green" action="#{bean.update}" >
                                            <f:setPropertyActionListener target="#{bean.color}" value="de" />
                                    </h:commandButton>
4

1 に答える 1

2

通常のボタンの場合と同じように、h：commandButtonに任意の種類のスタイルを追加できます。たとえば、無効にしたボタンを感じさせるには、デフォルトで最初のボタンの不透明度を設定するだけです。

<h:commandButton  value ="blue" action="#{bean.update}" 
                  style="opacity: 0.65" >
                 <f:setPropertyActionListener target="#{bean.color}" value="blue" />
</h:commandButton>

styleClassまたは、属性を使用してボタンにcssクラスを追加するだけです

<h:commandButton  value ="blue" action="#{bean.update}" 
                  styleClass="pressedButtonStyle" >
                 <f:setPropertyActionListener target="#{bean.color}" value="blue" />
</h:commandButton>

2番目のボタンのクラスを変更するには、onClick関数を使用して、ボタンに新しいcssスタイルを追加します。

<h:commandButton value ="green" action="#{bean.update}" onClick="$(this).addClass("pressedButtonStyle")" >
    <f:setPropertyActionListener target="#{bean.color}" value="de" />
</h:commandButton>

ページに戻った後もボタンの状態を維持したい場合は、次のような条件に従ってこれらのクラスを適用できます。

<h:commandButton  value ="blue" action="#{bean.update}" style="opacity : #{bean.color eq 'blue' ? 0.65 : 1}">
      <f:setPropertyActionListener target="#{bean.color}" value="blue" />
</h:commandButton>

<!--green button is highlighted as pressed when clicked -->
<h:commandButton value ="green" action="#{bean.update}"  style="opacity : #{bean.color eq 'de' ? 0.65 : 1}" >
      <f:setPropertyActionListener target="#{bean.color}" value="de" />
</h:commandButton>
于 2013-02-04T19:12:53.160 に答える