jQuery atributos de dados
jQuery Mobile usa o HTML5 data-* atributo para criar um "touch-friendly" olhar e atraente para dispositivos móveis.
Para a lista de referência a seguir, bold value especifica o valor padrão.
Botão
Reprovado na versão 1.4. Use Classes CSS em vez disso. Hiperligações com data-role="button" . Elementos de botão e links em barras de ferramentas e campos de entrada são denominados automaticamente como botões, não há necessidade de data-role="button" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-corners | true | false | Especifica se o botão deve ter cantos arredondados ou não |
| data-icon | Icons Reference | Especifica o ícone do botão. O padrão é nenhum ícone |
| data-iconpos | left | right | top | bottom | notext | Especifica a posição do ícone |
| data-iconshadow | true | false | Especifica se o ícone do botão deve ter sombras ou não |
| data-inline | true | false | Especifica se o botão deve ser em linha ou não |
| data-mini | true | false | Especifica se o botão deve ser de tamanho pequeno ou regulares |
| data-shadow | true | false | Especifica se o botão deve ter sombras ou não |
| data-theme | letter (a-z) | Especifica a cor do tema do botão |
Para agrupar vários botões, use um recipiente com o data-role="controlgroup" atributo juntamente com data-type="horizontal|vertical" para especificar se a botões de grupo horizontalmente ou verticalmente.
Caixa de seleção
Pares de rótulos e inputs com type="checkbox" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-mini | true | false | Especifica se a caixa de seleção deve ser de tamanho pequeno ou regulares |
| data-role | none | Impede jQuery Mobile para caixas de estilo como botões |
| data-theme | letter (a-z) | Especifica a cor do tema da caixa de seleção |
Para agrupar várias caixas de verificação, use a data-role="controlgroup" , juntamente com o data-type="horizontal|vertical" para especificar se o grupo de caixas de seleção horizontal ou na vertical.
desmontável
Um elemento cabeçalho seguido por qualquer marcação HTML dentro de um recipiente com o data-role="collapsible" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-collapsed | true | false | Especifica se o conteúdo deve ser fechado ou expandido |
| data-collapsed-cue-text | sometext | Especifica algum texto para fornecer feedback audível para os usuários com software leitor de tela. O padrão é "clique para entrar em colapso conteúdos". |
| data-collapsed-icon | Icons Reference | Especifica o ícone do botão desmontável. O padrão é "plus" |
| data-content-theme | letter (a-z) | Especifica a cor do tema do conteúdo desmontável. Irá também adicionar cantos arredondados para o conteúdo recolhível |
| data-expanded-cue-text | sometext | Especifica algum texto para fornecer feedback audível para os usuários com software leitor de tela. O padrão é "clique para expandir o conteúdo". |
| data-expanded-icon | Icons Reference | Especifica o ícone do botão dobrável quando o conteúdo é expandido. O padrão é "minus" |
| data-iconpos | left | right | top | bottom | Especifica a posição do ícone |
| data-inset | true | false | Especifica se o botão dobrável deve ser decorados com cantos arredondados e uma margem ou não |
| data-mini | true | false | Especifica se os botões dobráveis devem ser de tamanho pequeno ou regulares |
| data-theme | letter (a-z) | Especifica a cor do tema do botão dobrável |
Set dobrável
Blocos de conteúdo dobráveis dentro de um recipiente com o data-role="collapsibleset" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-collapsed-icon | Icons Reference | Especifica o ícone do botão desmontável. O padrão é "plus" |
| data-content-theme | letter (a-z) | Especifica a cor do tema do conteúdo recolhível |
| data-expanded-icon | Icons Reference | Especifica o ícone do botão dobrável quando o conteúdo é expandido. O padrão é "menos" |
| data-iconpos | left | right | top | bottom | notext | Especifica a posição do ícone |
| data-inset | true | false | Especifica se os collapsibles devem ser decorados com cantos arredondados e uma margem ou não |
| data-mini | true | false | Especifica se os botões dobráveis devem ser de tamanho pequeno ou regulares |
| data-theme | letter (a-z) | Especifica a cor do tema do conjunto dobrável |
Conteúdo
Reprovado na versão 1.4, e será removido em 1,5. Recipiente com data-role="content" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-theme | letter (a-z) | Especifica a cor do tema do conteúdo |
Grupo de controle
Um <div> ou <fieldset> recipiente com data-role="controlgroup" . Grupos múltiplas entradas de estilo de botão de um único tipo (botões baseados em links, botões de rádio, caixas de seleção, selecione elementos). Para agrupar caixas de formulário e botões de rádio, o <fieldset> recipiente é recomendado dentro de um <div> com o "ui-fieldcontain" classe, para melhorar rótulo styling.
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-exclude-invisible | true | false | Especifica se deve excluir as crianças invisíveis na atribuição de cantos arredondados |
| data-mini | true | false | Especifica se o grupo deve ser de tamanho pequeno ou regulares |
| data-theme | letter (a-z) | Especifica a cor do tema do grupo controle |
| data-type | horizontal | vertical | Especifica se o grupo deve ser exibido horizontalmente ou verticalmente |
Diálogo
Um recipiente com data-dialog="true" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-close-btn | left | right | none | Especifica a posição do botão de fechar |
| data-close-btn-text | sometext | Especifica o texto para o botão de fechar |
| data-corners | true | false | Especifica se o diálogo deve ter cantos arredondados ou não |
| data-dom-cache | true | false | Especifica se a limpar o cache jQuery DOM ou não para as páginas individuais (se definido como verdadeiro, você precisa tomar cuidado para gerir o DOM si mesmo e testar exaustivamente em todos os dispositivos móveis) |
| data-overlay-theme | letter (a-z) | Especifica a cor de sobreposição (background) da página de diálogo |
| data-theme | letter (a-z) | Especifica a cor do tema da página de diálogo |
| data-title | sometext | Especifica o título para a página de diálogo |
Aprimoramento
Um recipiente com data-enhance="false" ou data-ajax="false"
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-enhance | true | false | Se definido como "true" , (padrão) jQuery Mobile vai denominar automaticamente a página, tornando-o adequado para dispositivos móveis. Se definido como "false", o quadro não irá estilizar a página |
| data-ajax | true | false | Especifica se para carregar páginas via ajax ou não |
Nota: data-enhance="false" deve ser usado em conjunto com $.mobile.ignoreContentEnabled=true" para parar jQuery Mobile para páginas de estilo automaticamente.
Qualquer link ou formulário elemento dentro data-ajax="false" contêineres serão ignorados pela funcionalidade de navegação da estrutura quando $.mobile.ignoreContentEnabled é definido como verdadeiro.
O campo Container
Reprovado na versão 1.4, e será removido em 1,5. Use class="ui-fieldcontain instead" . Um recipiente com data-role="fieldcontain" envolvida em torno da etiqueta / form elemento par.
Barra de ferramentas fixa
Um recipiente com data-role="header" ou data-role="footer" em conjunto com a data-position="fixed" atributo.
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-disable-page-zoom | true | false | Especifica se o usuário é capaz de dimensionar / zoom da página ou não |
| data-fullscreen | true | false | Especifica barras de ferramentas para estar sempre posicionados na parte superior e / ou inferior |
| data-tap-toggle | true | false | Especifica se o usuário é capaz de alternar barra de ferramentas de visibilidade na torneiras / cliques ou não |
| data-transition | slide | fade | none | Especifica o efeito de transição quando um tap / clique ocorre |
| data-update-page-padding | true | false | Especifica o preenchimento da parte superior e inferior da página para ser atualizado em redimensionar, transição e "updatelayout" eventos (jQuery Mobile sempre atualiza o preenchimento do "pageshow" evento) |
| data-visible-on-page-show | true | false | Especifica barra de ferramentas de visibilidade quando a página pai é mostrado |
Interruptor de alavanca aleta
Um <input type="checkbox"> com uma data-papel da "flipswitch" :
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-mini | true | false | Especifica se a opção deve ser de tamanho pequeno ou regulares |
| data-on-text | sometext | Especifica o "on" texto no switch flip (padrão é "On" ) |
| data-off-text | sometext | Especifica o texto "off" no switch flip (padrão é "Off" ) |
Rodapé
Um recipiente com data-role="footer" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-id | sometext | Especifica uma identificação única. Necessário para rodapés persistentes |
| data-position | inline | fixed | Especifica se o rodapé deve ser em linha com o conteúdo da página ou permanecer posicionado na parte inferior |
| data-fullscreen | true | false | Especifica se o rodapé deve ser sempre posicionado na parte inferior e sobre o conteúdo da página (ligeiramente see-through) ou não |
| data-theme | letter (a-z) | Especifica a cor do tema do rodapé |
Nota: Para activar a posição de tela cheia, o uso data-position="fixed" e, em seguida, adicione a data-fullscreen atributo para o elemento.
Cabeçalho
Um recipiente com data-role="header" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-id | sometext | Especifica uma identificação única. Necessário para cabeçalhos persistentes |
| data-position | inline | fixed | Especifica se o cabeçalho deve ser em linha com o conteúdo da página ou permanecer posicionado na parte superior |
| data-fullscreen | true | false | Especifica se o cabeçalho devem estar sempre posicionados na parte superior e ao longo do conteúdo da página (ligeiramente see-through) ou não |
| data-theme | letter (a-z) | Especifica a cor do tema do cabeçalho |
Nota: Para activar a posição de tela cheia, o uso data-position="fixed" e, em seguida, adicione a data-fullscreen atributo para o elemento.
entradas
Insumos com type="text|search|etc." Ou textarea elements .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-clear-btn | true | false | Especifica se a entrada deve ter um "clear" botão |
| data-clear-btn-text | text | Especifica um texto para o botão "clear". O padrão é "clear text" |
| data-mini | true | false | Especifica se a entrada deve ser de tamanho pequeno ou regulares |
| data-role | none | Impede jQuery Mobile para estilo de entradas / textareas como botões |
| data-theme | letter (a-z) | Especifica a cor do tema do campo de entrada |
Ligação
Todos os links.
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-ajax | true | false | Especifica se para carregar páginas via Ajax para melhorar a experiência do usuário e transições. Se definido como false, jQuery Mobile fará uma solicitação de página normal. |
| data-direction | reverse | animação de transição inversa (apenas para página ou de diálogo) |
| data-dom-cache | true | false | Especifica se a limpar o cache jQuery DOM ou não para as páginas individuais (se definido como verdadeiro, você precisa tomar cuidado para gerir o DOM si mesmo e testar exaustivamente em todos os dispositivos móveis) |
| data-prefetch | true | false | Especifica se a pré-busca de páginas no DOM, para que eles estejam disponíveis quando o utilizador visita-los |
| data-rel | back | dialog | external | popup | Especifica uma opção de como o link deve se comportar. Voltar - Move um passo para trás na história. Diálogo - Abre um link como um diálogo, não rastreados na história. Externo - Para ligar para outro domínio. Popup - abre uma janela pop-up. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Especifica como fazer a transição de uma página para a próxima. Veja nossa jQuery Mobile Transitions capítulo. |
| data-position-to | origin | jQuery selector | window | Especifica a posição das caixas de pop-up. Origem - Padrão. Posiciona o pop-up sobre o link que abre. seletor jQuery - posiciona o pop-up sobre o elemento especificado. Janela - posiciona o pop-up no meio da tela da janela. |
Lista
Um <ol> ou <ul> com data-role="listview" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-autodividers | true | false | Especifica se deve dividir automaticamente itens de lista ou não |
| data-count-theme | letter (a-z) | Especifica a cor do tema da bolha da contagem |
| data-divider-theme | letter (a-z) | Especifica a cor do tema da lista divisor |
| data-filter | true | false | Especifica se para adicionar uma caixa de pesquisa em uma lista ou não |
| data-filter-placeholder | sometext | Reprovado na versão 1.4. Use o atributo de espaço reservado HTML em vez disso. Especifica o texto dentro da caixa de pesquisa. O padrão é "Filtrar itens ..." |
| data-filter-theme | letter (a-z) | Especifica a cor do tema do filtro de pesquisa |
| data-icon | Icons Reference | Especifica o ícone da lista |
| data-inset | true | false | Especifica se a lista deve ser decorados com cantos arredondados e uma margem ou não |
| data-split-icon | Icons Reference | Especifica o ícone do botão de divisão. O padrão é "seta-r" |
| data-split-theme | letter (a-z) | Especifica a cor do tema do botão de divisão |
| data-theme | letter (a-z) | Especifica a cor do tema da lista |
item da lista
Um <li> dentro de um <ol> ou <ul> com data-role="listview" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-filtertext | sometext | Especifica um texto para procurar ao filtrar elementos. Este texto irá então ser filtrado em vez de o próprio texto item da lista |
| data-icon | Icons Reference | Especifica o ícone do item da lista |
| data-role | list-divider | Especifica um divisor para itens de lista |
| data-theme | letter (a-z) | Especifica a cor do tema do item da lista |
Nota: A-icon dados atributo só trabalho sobre os itens da lista com links.
navbar
<li> elementos dentro de um recipiente com data-role="navbar" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-icon | Icons Reference | Especifica o ícone do item da lista |
| data-iconpos | left | right | top | bottom | notext | Especifica a posição do ícone |
Navbars herdar o tema-amostra de seu recipiente pai. Não é possível definir o atributo-theme dados para uma barra de navegação. O atributo-tema de dados pode ser definido individualmente para cada link dentro da barra de navegação.
Página
Um recipiente com data-role="page" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-dom-cache | true | false | Especifica se a limpar o cache jQuery DOM ou não para as páginas individuais (se definido como verdadeiro, você precisa tomar cuidado para gerir o DOM si mesmo e testar exaustivamente em todos os dispositivos móveis) |
| data-overlay-theme | letter (a-z) | Especifica a cor de sobreposição (background) de páginas de diálogo |
| data-theme | letter (a-z) | Especifica a cor do tema da página |
| data-title | sometext | Especifica o título da página |
| data-url | url | Valor para atualizar o URL, em vez do URL utilizado para solicitar a página |
Aparecer
Um recipiente com data-role="popup" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-corners | true | false | Especifica se o pop-up deve ter cantos arredondados ou não |
| data-dismissible | true | false | Especifica se o pop-up deve ser fechado clicando fora do popup ou não |
| data-history | true | false | Especifica se o popup deve criar um item de histórico do navegador quando aberto. Se definido como falso, que não irá criar um item de história, e depois não ser closeable através do botão "Voltar" do navegador |
| data-overlay-theme | letter (a-z) | Especifica a cor de sobreposição (ao fundo) da caixa de pop-up. O padrão é fundo transparente (nenhum). |
| data-shadow | true | false | Especifica se a caixa de pop-up deve ter sombras ou não |
| data-theme | letter (a-z) | Especifica a cor do tema da caixa de pop-up. Padrão herdado, "none" define o pop-up para transparente |
| data-tolerance | 30, 15, 30, 15 | Especifica a distância entre as bordas da janela ( top, right, bottom, left ) |
Uma âncora com data-rel="popup" :
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Especifica a posição das caixas de pop-up. Origem - Padrão. Posiciona o pop-up sobre o link que abre. seletor jQuery - posiciona o pop-up sobre o elemento especificado. Janela - posiciona o pop-up no meio da tela da janela. |
| data-rel | popup | Para abrir a caixa de pop-up |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Especifica como fazer a transição de uma página para a próxima. Veja nossa jQuery Mobile Transitions capítulo. |
Botao de radio
Pares de rótulos e inputs com type="radio" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-mini | true | false | Especifica se o botão deve ser de tamanho pequeno ou regulares |
| data-role | none | Impede jQuery Mobile para estilo radiobuttons como o reforço de botões |
| data-theme | letter (a-z) | Especifica a cor do tema do botão de rádio |
Para agrupar vários botões de rádio, use a data-role="controlgroup" , juntamente com o data-type="horizontal|vertical" para especificar se para agrupar os botões horizontalmente ou verticalmente.
selecionar
Todos <select> elementos.
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-icon | Icons Reference | Especifica o ícone do elemento select. O padrão é "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Especifica a posição do ícone |
| data-inline | true | false | Especifica se o elemento select deve ser em linha ou não |
| data-mini | true | false | Especifica se o select devem ser de tamanho pequeno ou regulares |
| data-native-menu | true | false | Quando definida como false, ele usa menu de seleção próprio costume do jQuery (recomendado se você deseja que o menu de seleção para exibir a mesma em todos os dispositivos móveis) |
| data-overlay-theme | letter (a-z) | Especifica a cor tema do menu de seleção próprio costume do jQuery (usado em conjunto com data-native-menu="false" ) |
| data-placeholder | true | false | Pode ser definido em um <option> elemento de um seleto non-native |
| data-role | none | Impede jQuery Mobile para elementos select estilo como botões |
| data-theme | letter (a-z) | Especifica a cor do tema do elemento select |
Para múltiplos grupo selecionar elementos, use a data-role="controlgroup" , juntamente com o data-type="horizontal|vertical" para especificar se deve agrupar os elementos horizontalmente ou verticalmente.
Slider
Insumos com type="range" .
| Data-atributo | Valor | Descrição |
|---|---|---|
| data-highlight | true | false | Especifica se a faixa do seletor devem ser destacadas ou não |
| data-mini | true | false | Especifica se o controle deslizante deve ser de tamanho pequeno ou regulares |
| data-role | none | Impede jQuery Mobile para controles deslizantes estilo como botões |
| data-theme | letter (a-z) | Especifica a cor do tema do controle deslizante (a entrada, manipular e controlar) |
| data-track-theme | letter (a-z) | Especifica a cor do tema da pista deslizante |