jQuery UI (Buttonset)

Não é de hoje que o JQueryUI vem ajudando a nossa vida né?? \o/

Pois bem, venho falar hoje sobre um item muito interessante que eu trabalhei recentemente que é o “ButtonSet”. Ele nada mais é que um grupo de checkboxes com o visual de botão, isso aí… aqueles grupos de ‘botões’ que você aperta e ele permanece pressionado!

Primeiramente, faz o favor de baixar o JQueryUI lá no site oficial. Descompacta na sua pastinha de trabalho e vamos lá.
Hoje o JqueryUI está na sua versão 1.8.20 e já trás junto o JQuery versão 1.7.2.

Eu criei uma pastinha de trabalho chamada ‘ExemploBuuttonSet’ e descompactei os arquivos do JQueryUI dentro de uma outra pasta chamada ‘jquery-ui’.

Depois criei um arquivo html ‘buttonSet.html’ para importar os arquivos necessários para o JQueryUI funcionar, da seguinte forma:


<link type="text/css" href="jquery-ui/css/ui-darkness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.20.custom.min.js"></script>

Após importar os arquivos do JQueryUI vamos criar uma div que conterá todos os checkboxes do nosso exemplo:

<div id="format">
  <input type="checkbox" id="check1" value="check1" />
    <label for="check1">Elaine</label>
  <input type="checkbox" id="check2" value="check2"/>
    <label for="check2">Cristina</label>
  <input type="checkbox" id="check3" value="check3" />
    <label for="check3">Rocha</label>
  <input type="checkbox" id="check4" value="check4" />
    <label for="check4">Oliveira</label>
</div>

Para ativar o buttonSet nos meus checkboxes que estão dentro da div ‘format’, eu faço o seguinte código. Este código pode ser inserido logo abaixo do código de importação dos arquivos do jQueryUI:

<script>
  $(function(){
    $("#format").buttonset();
  });
</script>

Pronto! Com esse código nós já temos o seguinte resultado.

Exemplo ButtonSet JQueryUI

Exemplo ButtonSet JQueryUI

Neste caso eu baixei o JQueryUI com o tema ‘ui-darkness’. Então a cor cinza representa os botões não clicados, o azul aparece quando colocamos o mouse sobre o botão e o laranja representa o botão clicado/marcado.

Para o sistema que estou desenvolvendo, eu utilizei esta série de botões para que o meu usuário pudesse selecionar as colunas que ele quer que um relatório exiba. Então ao marcar ou desmarcar um botão, eu tenho que atualizar uma tabela temporária e para isso eu chamo uma função javascript que vai disparar todo o processo.

Enfim… no fim das contas eu precisava que ao clicar em qualquer um destes botões, uma função fosse chamada para que eu pudesse pegar o id do checkbox clicado para disparar minha função.

Para fazer isso eu fiz o seguinte código:

<script>
  $(function() {
    $("format input:checkbox").click(function() {
      alert(this.id);
    });
  });
</script>

E olha só que legal! Ao clicar em cada um dos meus botões, eu consigo pegar o id dele por exemplo. Com isso e mais um pouco de trabalho já dá pra fazer muita coisa legal no seu sistema.

Para quem quiser… Baixe o exemplo aqui!

É isso aí! Espero ter ajudado…
😉

Anúncios

About ElaineCRO

Graduada em Sistemas de Informação. Programadora, apaixonada pela minha profissão, doida por forró e pelas pessoas que me dão valor. \o/

2 responses to “jQuery UI (Buttonset)”

  1. Fabiana says :

    Realmente muito bom… mas não consigo colocar na minha pagina mais que um único grupo de checkboxes e radios…
    Vc tem alguma dica?????
    Obrigada e valeu pelo post… otimo mesmo

    • ElaineCRO says :

      Ei Fabiana. Acredito que a ligação para fazer vários grupos em uma mesma página está no nome do id da div que contém os inputs e o id utilizado no javascript. Veja que neste exemplo a ligação está no id ‘format’.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: