Switch button

Olá leitores,

Essa semana trabalhei no desenvolvimento do switch button que será usado no nosso sistema para identificar se um boleto foi ou não pago. Esse tipo de botão é muito usado para ligar e ligar funções em dispositivos eletrônicos.

A interface clássica do switch button seria algo do tipo:

Analisem a baixo o código usado como base para o desenvolvimento desse botão:

<html>

  <head>

     <!-- define on/off styles -->
     <style type="text/css">
      .on  { background:blue; }
      .off { background:red; }
     </style>

     <!-- define the toggle function -->
     <script language="javascript">
        function toggleState(item){
           if(item.className == "on") {
              item.className="off";
           } else {
              item.className="on";
           }
        }
     </script>
  </head>

  <body>
     <!-- call 'toggleState' whenever clicked -->
     <input type="button" id="btn" value="button" 
        class="off" onclick="toggleState(this)" />
  </body>

</html>

Até a próxima!

Contactus

Switch button

0 comentários:

Postar um comentário