jQuery Mobile fornece um conjunto de ícones que vão fazer seus botões olhar mais desejável.
Adicionando ícones para jQuery Mobile Botões
Para adicionar um ícone para o botão, utilize o ui-icon classe, e posicione o ícone com uma classe ícone de posição (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Nota: Para outros botões, como botões nas telas de lista e formas, você deve usar o atributo-icon dados. Isso será explicado em um capítulo posterior.
Abaixo listamos alguns ícones disponíveis que jQuery Mobile oferecem:
| classe ícone | Descrição | Ícone | Exemplo |
|---|---|---|---|
| ui-icon-arrow-l | Seta esquerda | Tente | |
| ui-icon-arrow-r | Seta direita | Tente | |
| ui-icon-info | Em formação | Tente | |
| ui-icon-delete | Excluir | Tente | |
| ui-icon-back | Costas | Tente | |
| ui-icon-audio | caixas de som | Tente | |
| ui-icon-lock | Cadeado | Tente | |
| ui-icon-search | Pesquisa | Tente | |
| ui-icon-alert | Alerta | Tente | |
| ui-icon-grid | Grade | Tente | |
| ui-icon-home | Casa | Tente |
Para uma referência completa de todos os ícones de botão jQuery Mobile, por favor, vá ao nosso jQuery Ícones móveis Referência .
Ícones de posicionamento
Você pode especificar um dos quatro valores para onde o ícone deve ser posicionado no botão: top, right, bottom ou left .
Use o ui-btn-icon classe para especificar a posição:
Ícone de posição para Botões de link
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Tente você mesmo " Se você não especificar a posição ícone para botões de link, o ícone não será exibido.
Exibindo apenas o ícone
Para exibir somente o ícone, use "notext" como valor para a posição do ícone:
Exemplo
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Tente você mesmo " Removendo The Circle
Por padrão, todos os ícones têm um círculo cinza (disco) em torno deles. Para remover o círculo, adicione o "ui-nodisc-icon" classe para o elemento ou o seu recipiente:
Exemplo
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Tente você mesmo " Ícones preto ou branco
Por padrão, todos os ícones são brancos. Para alterar a cor do ícone para preto, adicione o "ui-alt-icon" para o elemento ou o seu recipiente:
Exemplo
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Tente você mesmo " mais Exemplos
Adicione o "ui-nodisc-icon" classe para um recipiente
Um exemplo do "ui-nodisc-icon" classe adicionada a um recipiente.
Adicione o "ui-alt-icon" classe para um recipiente
Um exemplo do "ui-alt-icon" classe adicionada a um recipiente.