Artigos HTML e CSS jQuery UI Button

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>
Listagem 1. Importação da jQuery UI

É 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>
Listagem 2. Criando botões básicos

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.

Botões básicos
Figura 1. Botões básicos

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>
Listagem 3. Criado grupo de botões

Sendo necessário, também se pode utilizar links e inputs e estes seriam igualmente formatados.

O resultado é apresentado na figura a seguir.

Botões agrupados
Figura 2. Botões agrupados

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>
Listagem 4. Criando checkboxes e radios
Checkboxes e radios estilizados
Figura 3. Checkboxes e radios estilizados

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.

Veja também: