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

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…
😉

Autocomplete do jQuery UI com PHP

Olá!!!

Bom… depois de muito suor, bateção de cabeça na minha mesa, muitos xingamentos ao meu computador (que não tinha nada a ver ‘coitado’…)… eu consegui implementar no meu sistema o autocomplete “bunitinho”, “lindinho” e “tchuco-tchuco” do jQuery UI!!!! \o/

Bom.. pra início de conversa, favor baixar aqui a versão mais recente do jQuery UI. Descompacta na sua pastinha de trabalho e mãos à obra.

Vamos precisar de dois arquivos: ‘formulario.php’ e ‘buscaDados.php’. O primeiro é onde estará o seu formulário que conterá seu campo autocomplete e o segundo, logicamente, é onde estará a pesquisa dos dados que retornarão para o autocomplete.

Antes de mais nada, em ‘formulario.php’ vamos fazer as chamadas para os arquivos .css e .js que vamos precisar para implementar o autocomplete. Todos se encontram no arquivo que você baixou e descompactou na pastinha de trabalho. No meu caso estou trabalhando com a versão 1.8.9 do jQuery UI que me trouxe a versão 1.4.4 do jQuery.

<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js">
</script><link type="text/css" href="jquery-ui-1.8.9.custom/css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet"/>

Só para lembrar, estas linhas são inseridas dentro das tag’s  <head>e </head>.  =)

Também no arquivo ‘formulario.php’, vamor criar um <form> </form> e dentro dele criar um textfield que vamos nomear de ‘auto’ para facilitar o processo:

<input type="text" id="auto" />

A propriedade ‘id’ do campo é o que permite a referenciação no jQuery. Agora vamos criar uma função ready para criar o campo autocomplete; esta função vem logo abaixo da referenciação dos arquivos .css e .js.

<script type="text/javascript">
  $(document).ready(function() 	{
    $('#auto').autocomplete(
    {
      source: "buscaDados.php",
      minLength: 2
    });
  });
</script>

Viu!? Estou dizendo que o campo ‘auto’ é um campo ‘autocomplete’ e que os dados virão do source ‘buscaDados.php’. Com a propriedade ‘minLength’ eu estou dizendo que o autocomplete será ativado quando eu tiver um mínimo de 2 caracteres digitados no meu campo ‘auto’.

E para finalizar, no arquivo ‘buscaDados.php’ você vai fazer a conexão com o banco de dados e retornar as informações da tabela que você quer:

$hostname = "localhost";
$user = "root";
$pass = "";
$basedados = "teste";
$connect = mysql_connect($hostname,$user,$pass) or die ("Impossível estabelecer conexão com o servidor de banco de dados");
mysql_select_db($basedados) or die ("Impossivel estabelecer conexão com o banco de dados");

//busca valor digitado no campo autocomplete "$_GET['term']
$text = mysql_real_escape_string($_GET['term']);
$query = "SELECT * FROM tabela WHERE campoTexto LIKE '%$text%' ORDER BY campoTexto ASC";
$result = mysql_query($query);
//formata o resultado para JSON
$json = '[';
$first = true;
while($row = mysql_fetch_array($result))
{
  if (!$first) { $json .=  ','; } else { $first = false; }
  $json .= '{"value":"'.utf8_encode($row['campoTexto']).'"}';
}
$json .= ']';

echo $json;

Então… é assim que se cria um campo autocomplete como o da imagem abaixo, que é um print de um pedaço do meu sistema:

Você pode formatar o autocomplete de várias formas, é possível personalizar um tema ou escolher um pré-existente para baixar aqui.

O exemplo que eu me guiei para conseguir aprender a usar esta funcionalidade foi o do burnmind.com que também disponibiliza o fonte para download e um demo. Obs.: o demo deles está configurado para que o autocomplete apareça a partir da 3ª letra digitada (experimente digitar “col”).

Espero ter ajudado! Qualquer coisa é só comentar aew…. =)

Até mais.