jQuery Mobile - Classes CSS
Classes CSS jQuery
Você pode usar diferentes tipos de classes CSS para definir o estilo dos elementos, conforme descrito nas seções a seguir.
Classes Globais
As seguintes classes podem ser usadas como classes globais em widgets jQuery Mobile -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | ui-corner-all Ele exibe os elementos com cantos arredondados. |
| 2 | ui-shadow Ele exibe a sombra dos elementos. |
| 3 | ui-overlay-shadow Ele exibe a sombra de sobreposição para os elementos. |
| 4 | ui-mini Ele exibe os elementos menores. |
Classes de botão
A tabela a seguir lista as classes de botão que são usadas com âncora ou elementos de botão -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | ui-btn Ele especifica que o elemento será denominado como botão. |
| 2 | ui-btn-inline Mostra o botão como um elemento embutido que economiza o espaço necessário para a etiqueta. |
| 3 | ui-btn-icon-top Coloca o ícone acima do texto. |
| 4 | ui-btn-icon-right Coloque o ícone à direita do texto. |
| 5 | ui-btn-icon-bottom Coloca o ícone abaixo do texto. |
| 6 | ui-btn-icon-left Coloque o ícone à esquerda do texto. |
| 7 | ui-btn-icon-notext Ele mostra o único ícone. |
| 8 | ui-btn-a|b Ele exibe a cor do botão ("a" será a cor de fundo padrão, ou seja, cinza e "b" mudará a cor de fundo para preto). |
Classes de ícones
A tabela a seguir lista as classes de ícone que são usadas com elementos âncora ou botão -
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | ui-icon-action Mostra o ícone de ação. |
| 2 | ui-icon-alert Ele exibe o ponto de exclamação dentro de um triângulo. |
| 3 | ui-icon-arrow-d-l Ele especifica para baixo com a seta para a esquerda. |
| 4 | ui-icon-arrow-d-r Ele especifica para baixo com a seta para a direita. |
| 5 | ui-icon-arrow-u-l Ele especifica para cima com a seta para a esquerda. |
| 6 | ui-icon-arrow-u-r Ele especifica para cima com a seta para a direita. |
| 7 | ui-icon-arrow-l Ele especifica a seta para a esquerda. |
| 8 | ui-icon-arrow-r Ele especifica a seta para a direita. |
| 9 | ui-icon-arrow-u Ele especifica a seta para cima. |
| 10 | ui-icon-arrow-d Ele especifica a seta para baixo. |
| 11 | ui-icon-bars Mostra as 3 barras horizontais uma acima da outra. |
| 12 | ui-icon-bullets Ele mostra os 3 marcadores horizontais um acima do outro. |
| 13 | ui-icon-carat-d Ele exibe o quilate para baixo. |
| 14 | ui-icon-carat-l Ele exibe o quilate à esquerda. |
| 15 | ui-icon-carat-r Ele exibe o quilate à direita. |
| 16 | ui-icon-carat-u Ele exibe o quilate para cima. |
| 17 | ui-icon-check Mostra o ícone da marca de seleção. |
| 18 | ui-icon-comment Ele especifica o comentário ou mensagem. |
| 19 | ui-icon-forbidden Ele exibe o ícone proibido. |
| 20 | ui-icon-forward Ele especifica o ícone de avanço. |
| 21 | ui-icon-navigation Ele especifica o ícone de navegação. |
| 22 | ui-icon-recycle Ele exibe o ícone de reciclagem. |
| 23 | ui-icon-refresh Mostra o ícone de atualização. |
| 24 | ui-icon-tag Indica o ícone da tag. |
| 25 | ui-icon-video Indica o ícone de vídeo ou câmera. |
Aulas temáticas
Ele fornece dois tipos diferentes de temas, como tema "a" e tema "b" para personalizar a aparência do aplicativo. Você pode criar suas próprias classes de tema anexando uma letra de amostra (az). A tabela a seguir lista as classes de tema que são especificadas da letra a até z.
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | ui-bar-(a-z) Ele exibe a cor da barra, incluindo cabeçalhos, rodapés e outras barras na página. |
| 2 | ui-body-(a-z) Ele exibe a cor do bloco de conteúdo, incluindo listview, pop-ups, controles deslizantes, painéis, carregadores, etc. |
| 3 | ui-btn-(a-z) Ele exibe a cor do botão. |
| 4 | ui-group-theme-(a-z) Ele exibe a cor para grupos de controle, visualizações de lista e conjuntos recolhíveis. |
| 5 | ui-overlay-(a-z) Ele exibe a cor de fundo para pop-up, caixa de diálogo e recipientes de página. |
| 6 | ui-page-theme-(a-z) Ele exibe a cor das páginas. |
Classes de grade
A tabela a seguir lista as classes de grade que são usadas com largura igual, sem borda, fundo, margem ou preenchimento.
| Sr. Não. | Classe de grade | Colunas | Larguras da coluna | Corresponde a |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |