Em praticamente cem por cento dos sistemas que desenvolvemos, sejam eles desktop, mobile ou web, existem situações em que é necessária a submissão de dados por parte do usuário. E para submeter esses dados ou até mesmo para realizar uma simples ação como abrir uma nova janela, a forma mais comum e prática é utilizar botões.
Quando precisamos desse tipo de elemento (botão) em páginas web, geralmente recorremos às tradicionais tags e , porém, estes apresentam sempre a mesma aparência padrão e da qual o usuário muitas vezes já está enjoado.
Buscando melhorar o visual dos botões, podemos aplicar estilos com CSS e efeitos com Javascript, o que garante uma melhoria considerável na interface da aplicação. Nesses casos alteramos a cor do plano de fundo, bordas, fonte e às vezes inserimos pequenas imagens nos botões, facilitando a identificação da função dos mesmos.
Nesse artigo veremos como estilizar botões de forma simples e prática utilizando a biblioteca jQuery UI, que tem como base a jQuery aliada a eficientes folhas de estilo em cascata. Com ela, veremos que até mesmo links (tags <a>) podem ser tornar botões estilizados.
Importando a biblioteca jQuery UI
Para utilizar os recursos dessa poderosa biblioteca, é necessário apenas importar três arquivos no documento HTML: a biblioteca jQuery (arquivo Javascript), a própria jQuery UI (arquivo Javascript) e a folha de estilos da jquery UI (arquivo CSS).
Para isso, adicione as seguintes tags ao cabeçalho da página HTML.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
É fundamental que o script da jQuery seja referenciado antes do script da jQuery UI, pois a segunda depende da sintaxe da primeira para funcionar.
Botões básicos
Nos primeiros exemplos veremos como obter os botões da forma mais básica possível, o que pode ser feito com a chamada à função button() a partir do elemento que se deseja estilizar. Nos casos a seguir, utilizaremos as tags button, input e anchor para criar os botões.
<!doctype html>
<html
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$("input[type=submit], a, button").button();
});
</script>
</head>
<body>
<button>Tag button</button>
<input type="submit" value="Tag input (submit)" />
<a href="#">Tag âncora (a)</a>
</body>
</html>Como vemos, a sintaxe é bastante simples. Primeiramente utilizamos jQuery para selecionar os três elementos a partir dos nomes das tags e em seguida chamamos a função button, responsável por dar forma ao elemento.
O resultado desse código, quando salvo em uma arquivo de extensão html e aberto no browser, é o seguinte.
Grupos de botões
Muitas vezes temos vários botões cujas funcionalidades estão relacionadas de alguma forma. Para esses casos, pode ser interessante agrupá-los, de forma a deixar claro que eles são semelhantes de alguma forma.
Para esses casos existe a função buttonset(), que quando aplicada a uma tag div contendo botões, a torna uma “barra” de ferramentas, agrupando seus itens. Quando se utiliza a função buttonset, a chamada à função button para os botões individualmente deixa de ser necessária, eles são automaticamente estilizados, como veremos no exemplo a seguir.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#barra" ).buttonset();
});
</script>
</head>
<body>
<div id="barra">
<button>Adicionar</button>
<button>Excluir</button>
<button>Editar</button>
<button>Salvar</button>
</div>
</body>
</html>Sendo necessário, também se pode utilizar links e inputs e estes seriam igualmente formatados.
O resultado é apresentado na figura a seguir.
Checkboxes e Radios
Com a jQuery UI também é possível estilizar inputs dos tipos checkbox e radio para que fiquem semelhantes a botões, fugindo um pouco do visual padrão. Reafirmando a simplicidade de uso dessa biblioteca, a formatação de checkboxes e rádios é feita exatamente da mesma forma que para botões comuns.
No exemplo a seguir temos checkboxes e rádios, agrupados e não agrupados, marcados e desmarcados, para ilustrar o funcionamento geral das funções button e buttonset para esses elementos.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$(".check").button();
$("#barra").buttonset();
});
</script>
</head>
<body>
<h1>Checkboxes</h1>
<input type="checkbox" class="check" checked="ckecked" id="chk1"/>
<label for="chk1">Marcado</label>
<input type="checkbox" class="check" id="chk2"/><label for="chk2">Desmarcado</label>
<h1>Radios</h1>
<div id="barra">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Opção 1</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Opção 2</label>
<input type="radio" id="radio3" name="radio" checked="checked" />
<label for="radio3">Opção 3</label>
</div>
</body>
</html>
Como se vê, o visual é bem mais agradável que o padrão.
Conclusão
É possível, ainda, adicionar ícones aos botões e criar submenus (split buttons), funcionalidades estas que não serão apresentadas nesse artigo, cujo objetivo é dar uma visão geral sobre o elemento jQuery UI Button.
Para obter maiores informações sobre esse recurso, fica como sugestão visitar a página da jQuery UI e ler a documentação oficial da biblioteca clicando aqui.
Espero que as informações aqui expostas possam ser úteis. Até o próximo artigo.
