Fórum | tutoriais mais recente desenvolvimento web
 

jQuery Mobile Atributos de dados


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-inlinetrue | false Especifica se o botão deve ser em linha ou não
data-minitrue | 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-minitrue | false Especifica se a caixa de seleção deve ser de tamanho pequeno ou regulares
data-rolenone 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-minitrue | 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-minitrue | 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-minitrue | 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-typehorizontal | 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-cachetrue | 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-fullscreentrue | 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-minitrue | 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-fullscreentrue | 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-fullscreentrue | 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-btntrue | 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-minitrue | false Especifica se a entrada deve ser de tamanho pequeno ou regulares
data-rolenone 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-directionreverse animação de transição inversa (apenas para página ou de diálogo)
data-dom-cachetrue | 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-prefetchtrue | false Especifica se a pré-busca de páginas no DOM, para que eles estejam disponíveis quando o utilizador visita-los
data-relback | 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-autodividerstrue | 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-filtertrue | 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-insettrue | 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-rolelist-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-iconposleft | 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-cachetrue | 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-urlurl 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-tolerance30, 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-relpopup Para abrir a caixa de pop-up
data-transitionfade | 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-minitrue | false Especifica se o botão deve ser de tamanho pequeno ou regulares
data-rolenone 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-iconposleft | right | top | bottom | notext Especifica a posição do ícone
data-inlinetrue | false Especifica se o elemento select deve ser em linha ou não
data-minitrue | 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-placeholdertrue | false Pode ser definido em um <option> elemento de um seleto non-native
data-rolenone 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-highlighttrue | false Especifica se a faixa do seletor devem ser destacadas ou não
data-minitrue | false Especifica se o controle deslizante deve ser de tamanho pequeno ou regulares
data-rolenone 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