按下時突出顯示commandbutton jsf 2.1

Question

我正在使用JSF 2.1編寫Web應用程序。我想用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> 

Answer 1

您可以將任何一種風格添加到您的H：作爲的commandButton你會做一個正常的按鈕。例如，要想禁用按鈕，您可以默認設置第一個按鈕的不透明度。

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

或者只是使用styleClass屬性

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

要更改類的第二個按鈕，你可以使用的onClick功能，新的CSS樣式添加到該按鈕添加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>