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

将css类添加到按钮中

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

要更改第二个按钮的类，可以使用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>

按下时突出显示命令按钮jsf 2.1

1 个答案: