jQuery UI Button

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (5)  (0)

Veja neste artigo como criar botões estilizados utilizando a biblioteca jQuery UI.

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 <button> e <input>, 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.

Listagem 1: Importação da jQuery UI

<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.

Listagem 2: Criando botões básicos

<!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.

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.

Listagem 3: Criado grupo de botões

<!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.

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.

Listagem 4: Criando checkboxes e rádios


<!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>

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 no endereço http://api.jqueryui.com/button/.

Espero que as informações aqui expostas possam ser úteis. Até o próximo artigo.

Veja também

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?