tutoriais mais recente desenvolvimento web
 

jQuery Mobile Classes CSS


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 .