O melhor tutorial Botão jQuery Mobile em 2024. Neste tutorial você pode aprender Criar um botão no jQuery Mobile,<Button>,<Input>,<a>,botões de navegação,Exemplos,botão embutido,Exemplos,Uma combinação de botões,Exemplos,botão Voltar,Exemplos,Mais links ocorrência de botão,

Botão jQuery Mobile

As aplicações móveis são construídos sobre o simples clique de coisas que você deseja exibir.





Criar um botão no jQuery Mobile

Em jQuery Mobile, o botão pode ser criada de três maneiras:

  • Use elemento <button>
  • Use elemento <input>
  • Use <a> elementos com data-role = "botão" de

<Button>

<button>按钮</button>

tente »

<Input>

<input type="button" value="按钮">

tente »

<a>

<a href="#" data-role="button" >按钮</a>

tente »

lâmpada Em jQuery Mobile, o botão será automaticamente styling, torná-los mais atraentes e disponibilidade em dispositivos móveis. Recomendamos que você use elementos <a> com data-role = "button" do link, use o <input> ou <> elemento entre as páginas formar submissão.


botões de navegação

Por meio do link botão entre as páginas, use <a> elementos com data-role = "button" propriedade:

Exemplos

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

tente »


botão embutido

Por defeito, o botão ocupa toda a largura do ecrã. Se você quer um conteúdo apenas a largura de um botão, ou se você deseja exibir dois ou mais botões lado a lado, adicione a-inline de dados = "true":

Exemplos

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

tente »


Uma combinação de botões

jQuery Mobile fornece uma maneira simples de combinar um botão.

Por favor, coloque data-role = "grupo controle" atributos e tipo de dados = "horizontal | vertical" usados ​​em conjunto para especificar se as combinações horizontais ou verticais de botões:

Exemplos

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

tente »

lâmpada Por padrão, os botões são uma combinação de composição vertical, sem margem e espaço entre eles. E apenas os primeiros e os últimos botões são arredondados, de modo que quando eles são combinados em conjunto para criar um olhar bonito.


botão Voltar

Para criar um botão Voltar, use dados rel = "volta" da propriedade (que ignora o valor href âncora):

Exemplos

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

tente »


Mais links ocorrência de botão

categoria descrição Exemplos
btn-ui-b Modificar a cor do botão é preto, a fonte é branco (fundo cinza padrão, fonte preta). tentar
ui-canto-all Botão para adicionar cantos arredondados tentar
ui-mini Fazer pequenos botões tentar
ui-sombra Botão para adicionar uma sombra tentar

nota Se você precisa mais estilos, cada classe de estilo separadas por um espaço, tais como: class = "btn-ui ui-btn-inline btn-ui-corner-all ui-sombra"

Por padrão, o <input> botão tem cantos arredondados e efeito de sombra. <a> e <button>, não.

classes CSS mais completas, consulte o nosso Manual do jQuery Mobile CSS Classe Referência .

A próxima seção mostra como adicionar um ícone no botão.

Botão jQuery Mobile
10/30