1 Reply Latest reply on Nov 28, 2011 6:59 AM by mn3

    How to make a toggleButton?

    mn3

      Hi,

       

      i need a rich:commandButton that works like a toggleButton? That means when i press the button it should stay pressed and when i click it again it should went back to normal state. I tried something with CSS but it does not work correctly. I wonder if Richfaces offers a simpler solution?

       

      Any Ideas?

       

      Thanks

      Mathias

        • 1. Re: How to make a toggleButton?
          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 ...