Botão do jQuery Mobile

Aplicações móveis são construídas sobre a conveniência das operações de toque.

Criando botões no jQuery Mobile

Os botões do jQuery Mobile podem ser criados de três maneiras:

  • Usando o elemento <button>
  • Usando o elemento <input>
  • Usando o elemento <a> com data-role="button"

<button>

<button>botão</button>

Experimente pessoalmente

<input>

<input type="button" value="Botão">

Experimente pessoalmente

<a>

<a href="#" data-role="button">Botão</a>

Experimente pessoalmente

Dica:Os botões no jQuery Mobile recebem estilos automaticamente, o que melhora sua interatividade e acessibilidade em dispositivos móveis. Recomendamos usar o elemento <a> com data-role="button" para criar links entre páginas, enquanto os elementos <input> ou <button> são usados para submissão de formulários.

Botões de navegação

Para criar uma ligação entre páginas usando botões, use o elemento <a> com data-role="button":

Exemplo

<a href="#pagetwo" data-role="button">Ir para a página dois</a>

Experimente pessoalmente

Botão em linha

Por padrão, os botões ocupam toda a largura da tela. Se você precisar que os botões se ajustem ao conteúdo ou se precisar exibir dois ou mais botões ao lado, adicione data-inline="true":

Exemplo

<a href="#pagetwo" data-role="button" data-inline="true">Ir para a página dois</a>

Experimente pessoalmente

Botões combinados

jQuery Mobile oferece métodos simples para combinar botões.

Use a propriedade data-role="controlgroup" em conjunto com data-type="horizontal|vertical" para combinar os botões horizontal ou verticalmente:

Exemplo

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Botão 1</a>
  <a href="#anylink" data-role="button">Botão 2</a>
  <a href="#anylink" data-role="button">Botão 3</a>
</div>

Experimente pessoalmente

Dica:Por padrão, os botões combinados são organizados verticalmente, sem margem externa e espaço em branco entre eles. E apenas o primeiro e o último botão têm cantos arredondados, criando um visual bonito ao combiná-los.

Botão de voltar

Para criar um botão de voltar, use a propriedade data-rel="back" (o valor href do âncora será ignorado):

Exemplo

<a href="#" data-role="button" data-rel="back">Voltar</a>

Experimente pessoalmente

Mais usado para os atributos data-* de botões

Atributo Valor Descrição Exemplo
data-corners true | false Define se o botão tem cantos arredondados. Teste
data-mini true | false Define se é um botão pequeno. Teste
data-shadow true | false Define se o botão tem sombra. Teste

Para informações completas sobre os atributos data-* do jQuery Mobile, acesse nossa Manual de Referência de Atributo Data do jQuery Mobile.

A próxima seção demonstra como adicionar ícones aos botões.