0

我正在使用 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>
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>

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