Ramon Victor

Dicas de como customizar formulários com jquey

| 3 Comments

Esta se tornando cada vez mais comum a pratica de Designers projetar formulários com visual diferente do padrão exibido pelos browsers.  Para implementar tal inovação, os desenvolvedores vem buscado soluções de scripts que não comprometam a acessibilidade e a performance do website.

Neste post irei demostrar uma solução que criei para personalizar inputs do tipo checkbox e radio, também listarei algumas referências de plugins muito úteis para customizar outros elementos do seu form.

Personalização de inputs checkbox e radio ( demo )

Para personalizar inputs do tipo checkbox e radio é muito simples, primeiro vamos utilizar a marcação abaixo:

<ol class="list_radio">
   <li><input type="radio" id="rad1" name="exemplos" class="rad" /> <label for="rad1">Label 1</label></li>
   <li><input type="radio" id="rad2"  name="exemplos" class="rad"  /> <label for="rad2">Label 2</label></li>
   <li><input type="radio" id="rad3" name="exemplos" class="rad"  /> <label for="rad3">Label 2</label></li>
</ol>
<ol class="list_check">
   <li><input type="checkbox" id="chck1" class="chck" /> <label  for="chck1">Label 1</label></li>
   <li><input type="checkbox" id="chck2" class="chck" /> <label  for="chck2">Label 2</label></li>
   <li><input type="checkbox" id="chck3" class="chck" /> <label  for="chck3">Label 3</label></li>
</ol>

No CSS vamos aproveitar a herança das classes ( list_check e list_radio ) para colocar os respectivos backgrounds nos labels.

/* Estilo para type='radio'*/
.list_radio li { float: left; margin-right: 15px}
.list_radio li label { background: url(radio_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_radio li label.ativo { background-position: 0 -25px}
/* Estilo para type='checkbox'*/
.list_check li { padding-bottom: 10px}
.list_check li label {  background: url(check_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_check li label.ativo { background-position: 0 -26px}

Pelo jQuery iremos controlar a adição e remoção da classe ativo no label.

$(document).ready(function() {
  //escondendo os inputs padrões
  $(".rad, .chck").hide();
  //verificando se exite inputs marcados
  $("form input").each(function(i){
    if($(this).is(':checked')) {
         $(this).siblings('label').addClass("ativo");
    }
  });
  // Radios estilizados
  $(".list_radio label").click(function() {
    $(this).parent().siblings().children("label").removeClass("ativo");
    $(this).addClass("ativo");
    $(this).siblings('input[type=radio]').attr("checked", "checked");
  });
  // Checkboxs estilizados
  $(".list_check label").toggle(
    function() {
       $(this).siblings('input[type=checkbox]').attr("checked", "checked");
       $(this).addClass("ativo");
    },
    function() {
       $(this).siblings('input[type=checkbox]').attr("checked", "");
       $(this).removeClass("ativo");
  });
});

Outras customizações

É importante resaltar que fugir demais do padrão dos formulários do browser pode comprometer a usabilidade e performance do site. Desta forma o Designer tem que avaliar bem a experiência e limitações dos usuários antes de implementar essas inovações.

3 Comments

  1. Dicas de como customizar formulários com jquey | #autopost

  2. Dicas de como customizar formulários com jquey | #autopost

Deixe uma resposta