As aplicações móveis são construídos sobre a simplicidade de tocar coisas que você deseja exibir.
Criando um botão no jQuery Mobile
Um botão no jQuery Mobile pode ser criada de três maneiras:
- Usando o <input> elemento
- Usando o <button> elemento com class="ui-btn"
- Usando o <a> elemento com class="ui-btn"
Botões em jQuery Mobile são denominados automaticamente, tornando-os atraentes e utilizável em ambos os dispositivos móveis e computadores de mesa. Recomendamos que você use o <a> elemento com class="ui-btn" para conectar-se entre as páginas, e <input> ou <button> elementos para o envio do formulário.
Nota: Antes da versão 1.4, foi utilizada a data-role="button" atributo para criar um botão no jQuery Mobile. A partir de 1.4, o quadro de usar o CSS aulas para botões de estilo (exceto <input> botões).
Botões de navegação
Para fazer o link entre as páginas por botões, use o <a> elemento com class="ui-btn" :
Botões agrupados
jQuery Mobile fornece uma maneira fácil para agrupar botões juntos.
Use o data-role="controlgroup" atributo juntamente com data-type="horizontal|vertical" em um elemento de recipiente, para especificar se o grupo de botões horizontal ou verticalmente:
Exemplo
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Tente você mesmo " Por padrão, botões agrupados são agrupados verticalmente sem margens e espaço entre elas. E apenas o primeiro eo último botão tem cantos arredondados, o que cria um olhar bom quando agrupados.
Voltar Botões
Para criar um botão Voltar, use a data-rel="back" atributo (Nota: isso irá ignorar o de âncora href valor):
inline Botões
Por defeito, botões ocupar toda a largura da tela. Se você quer um botão que é tão largo quanto o seu conteúdo, ou se você quer dois ou mais botões para aparecem lado a lado, adicione o "ui-btn-inline" class:
Mais Classes CSS para Link Botões
| Classe | Descrição | Exemplo |
|---|---|---|
| ui-btn-b | Muda a cor do botão para um fundo preto com texto branco (o padrão é fundo cinza com texto preto). | Tente |
| ui-corner-all | Adiciona cantos arredondados para o botão | Tente |
| ui-mini | Faz o botão menor | Tente |
| ui-shadow | Adiciona sombras para o botão | Tente |
Se você quiser usar mais de uma classe, separe cada classe com um espaço, como: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Por padrão, <input> botões têm sombra e cantos arredondados. O <a> e <button> elemento não faz.
Para uma referência completa de classes CSS para estilos comuns, visite o nosso jQuery Mobile CSS Classes de Referência .
O próximo capítulo demonstra como anexar ícones para seus botões.