-
1. Re: How to make a toggleButton?
mn3 Nov 28, 2011 6:59 AM (in response to mn3)I found a solution by myself but maybe there ist a simpler one!
First the CSS Styles for the toggleButton need to overwrite the skinning.ecss styles from richfaces:
input[class="toggleButton"] {
outline:grey outset thin;
background-color: LemonChiffon;
background-image:none;
margin-left:10px;
border-color: none;
border-width: 0px;
}
input[class="toggleButton"]:HOVER {
outline:grey inset thin;
background-color: LemonChiffon;
background-image:none;
border-width: 0px;
border-color: none;
}
input[class="toggleButton"]:ACTIVE {
outline:grey inset thin;
background-color: LemonChiffon;
background-image:none;
border-width: 0px;
border-color: none;
}
input[class="toggleButtonDown"] {
outline:grey inset 2px;
background-color: LemonChiffon;
background-image:none;
margin-left:10px;
background-position: left bottom;
background-repeat: repeat-x;
border-color: none;
border-width: 0px;
}
input[class="toggleButtonDown"]:HOVER {
outline:grey inset 2px;
background-color: LemonChiffon;
background-image:none;
margin-left:10px;
background-position: left bottom;
background-repeat: repeat-x;
border-color: none;
border-width: 0px;
}
input[class="toggleButtonDown"]:ACTIVE {
outline:grey inset 2px;
background-color: LemonChiffon;
background-image:none;
margin-left:10px;
background-position: left bottom;
background-repeat: repeat-x;
border-color: none;
border-width: 0px;
}
Next the JSF Code for the toggleButton:
<h:commandButton id="toggleButton"
styleClass="#{prototypAVModel.toggleButtonStyleClass}"
action="#{prototypAVModel.switchState}" value="Toggle"
onmousedown="jQuery(this).removeClass('toggleButton'); jQuery(this).addClass('toggleButtonDown');" />
And the BackBean Code:
private String toggleButtonStyleClass = "toggleButton";
public void switchState() {
if (toggleButtonStyleClass.equals("toggleButton")) {
toggleButtonStyleClass= "toggleButtonDown";
} else {
toggleButtonStyleClass= "toggleButton";
}
}
public String getToggleButtonStyleClass() {
return toggleButtonStyleClass;
}
Hope that helps someone or someone can recommend a simpler solution ...