Classes CSS do jQuery
jQuery Mobile usar Classes CSS para estilizar elementos diferentes.
Para a lista de referência abaixo, incluímos classes CSS para estilos comuns.
Classes globais
Essas classes podem ser adicionados em qualquer widgets do jQuery Mobile ( buttons, toolbars, panels, tables, lists , etc ..):
Classe | Descrição |
---|---|
ui-corner-all | Adiciona cantos arredondados para o elemento |
ui-shadow | Adiciona sombra ao elemento |
ui-overlay-shadow | Adiciona uma sombra de sobreposição ao elemento |
ui-mini | Faz com que o elemento de menor |
Classes de botão
Além das aulas globais, você pode adicionar as seguintes classes para <a> ou <button> elementos (não <input> botões):
Classe | Descrição |
---|---|
ui-btn | Deve ser adicionado ao <a> elementos se você quer que eles para ser denominado como botões |
ui-btn-inline | Exibe o botão em linha |
ui-btn-icon-top | Posiciona o ícone acima o texto do botão |
ui-btn-icon-right | Posiciona o ícone à direita do texto do botão |
ui-btn-icon-bottom | Posiciona o ícone abaixo o texto do botão |
ui-btn-icon-left | Posiciona o ícone à esquerda do texto do botão |
ui-btn-icon-notext | Exibe apenas o ícone |
ui-btn-a|b | Especifica a cor do botão. "a" é padrão (fundo cinza com texto preto), enquanto "b" irá mudar a cor para um fundo preto com texto branco |
Classes ícone
Todas as classes ícone disponível para <a> e <button> elementos (ver Referência ícones para saber como usar ícones em outros elementos):
Classe | ícone Descrição | Ícone |
---|---|---|
ui-icon-action | Ação (seta no sentido horário arco fora de uma caixa) | |
ui-icon-alert | ponto de exclamação dentro de um triângulo | |
ui-icon-audio | Som / Speakers | |
ui-icon-arrow-d-l | Para baixo, seta para a esquerda | |
ui-icon-arrow-d-r | Para baixo, seta para a direita | |
ui-icon-arrow-u-l | Cima, seta para a esquerda | |
ui-icon-arrow-u-r | Cima, seta para a direita | |
ui-icon-arrow-l | Seta esquerda | |
ui-icon-arrow-r | Seta direita | |
ui-icon-arrow-u | seta para cima | |
ui-icon-arrow-d | Seta para baixo | |
ui-icon-back | Voltar (seta curvada formando arcos anti-horário para cima) | |
ui-icon-bars | Três barras horizontais uns sobre os outros | |
ui-icon-bullets | Três balas horizontal uns sobre os outros | |
ui-icon-calendar | Calendário | |
ui-icon-camera | Câmera | |
ui-icon-carat-d | quilates de Down | |
ui-icon-carat-l | carat esquerda | |
ui-icon-carat-r | carat direita | |
ui-icon-carat-u | up quilates | |
ui-icon-check | Checkmark | |
ui-icon-clock | Relógio | |
ui-icon-cloud | Nuvem | |
ui-icon-comment | Comentário / Mensagem | |
ui-icon-delete | Excluir | |
ui-icon-edit | Editar / Lápis | |
ui-icon-eye | Olho | |
ui-icon-forbidden | sinal proibido | |
ui-icon-forward | Atacante - (de arco no sentido horário seta curvada para cima) | |
ui-icon-gear | Engrenagem | |
ui-icon-grid | Grade | |
ui-icon-heart | Símbolo do coração / amor | |
ui-icon-home | Início / Casa | |
ui-icon-info | Em formação | |
ui-icon-location | Localização | |
ui-icon-lock | Bloqueio / cadeado | |
ui-icon-mail | Mail / Letter | |
ui-icon-minus | Sinal de menos | |
ui-icon-navigation | Navegação | |
ui-icon-phone | Telefone | |
ui-icon-power | Alimentação (on / off) | |
ui-icon-plus | Sinal de mais | |
ui-icon-recycle | recycle sign | |
ui-icon-refresh | Refresh - seta Circular | |
ui-icon-search | Pesquisa / Lupa | |
ui-icon-shop | Shop / Bag | |
ui-icon-star | Estrela | |
ui-icon-tag | etiqueta | |
ui-icon-user | User / Uma pessoa | |
ui-icon-video | Câmera de vídeo |
Classes temáticos
jQuery Mobile fornece duas classes temáticas: uma (cinza) e b (preto). No entanto, você também pode criar seus valores de classe própria, feitos sob encomenda - todo o caminho até a letra "z" (Veja o capítulo Temas). A tabela abaixo lista as classes temáticos disponíveis. As letras (az) significa que você pode especificar uma letra de A a Z. Por exemplo: ui-bar-a ou ui-bar-b , etc.
Classe | Descrição |
---|---|
ui-bar-(a-z) | Especifica a cor para um bar - cabeçalhos, rodapés e outros bares |
ui-body-(a-z) | Especifica a cor Para um teor bloquear - página painéis de conteúdo (obsoleto na versão 1.4.0), itens ListView, pop-ups, collapsibles, carregador, sliders, e painéis |
ui-btn-(a-z) | Especifica a cor de um botão (e ícone) |
ui-group-theme-(a-z) | Especifica a cor para controlgroups, listviews e conjuntos dobráveis |
ui-overlay-(a-z) | Especifica a cor da página que o diálogo, pop-up e outros recipientes de página aparece no topo de fundo |
ui-page-theme-(a-z) | Especifica a cor para páginas |
Classes de grade
Colunas em uma grade têm a mesma largura (e 100% de largura no total), sem fronteira, fundo, margin ou padding. Existem cinco grades de layout que podem ser utilizados:
Classe grade | colunas | larguras de coluna | Corresponde a | Exemplo |
---|---|---|---|---|
ui-grid-solo | 1 | 100% | ui-block-a | Try it |
ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Para mais informações sobre redes, leia nossa jQuery Mobile Grids capítulo .