Atributo Data do jQuery Mobile Data

Atributos jQuery Data

jQuery Mobile usa atributos data-* do HTML5 para criar um visual atraente e amigável ao toque para dispositivos móveis.

Na lista de referência abaixo, os valores em negrito definem os valores padrão.

Button

Hyperlinks com data-role="button". Os elementos de botão da barra de ferramentas, links e campos de entrada serão automaticamente configurados com o estilo de botão, sem a necessidade de data-role="button".

Atributos de Dados Valor Descrição
data-corners true | false Definir se o botão terá cantos arredondados.
Todos os elementos <select>. Será automaticamente aplicado estilo de botão, sem necessidade de date-role. data-icon Definir o ícone do botão. O padrão é sem ícone.
Define o ícone do elemento select. O padrão é "arrow-d". data-iconpos Define a posição do ícone. Pode ser left | right | top | bottom | notext.
data-iconshadow true | false Definir se o ícone do botão terá sombra.
data-inline true | false Definir se o botão será inline.
data-mini true | false Definir se o botão será pequeno ou de tamanho normal.
data-shadow true | false Definir se o botão terá sombra.
data-theme letter (a-z) Definir a cor do tema do botão.

Dica:Para combinar vários botões, use um contêiner com os atributos data-role="controlgroup" e data-type="horizontal|vertical", para definir se os botões serão combinados horizontalmente ou verticalmente.

Checkbox

label e input com type="checkbox" são pares. Serão automaticamente definidos como estilo de botão, sem a necessidade de data-role.

Atributos de Dados Valor Descrição
data-mini true | false Define se o caixa de seleção deve ser pequeno ou de tamanho normal.
data-role none Impede que o jQuery Mobile defina o estilo de caixa de seleção como botão.
data-theme letter (a-z) Define a cor do tema do caixa de seleção.

Dica:Para combinar vários caixas de seleção, use data-role="controlgroup" e data-type="horizontal|vertical" para definir se a combinação deve ser horizontal ou vertical.

Collapsible

Elemento de título, seguido por qualquer marcação HTML dentro do contêiner com a propriedade data-role="collapsible".

Atributos de Dados Valor Descrição
data-collapsed true | false Define se o conteúdo deve ser fechado ou expandido.
data-collapsed-icon data-icon Define o ícone do botão expandível. O padrão é "mais".
data-content-theme letter (a-z) Define a cor do tema do conteúdo expandível. Além disso, adiciona bordas arredondadas ao conteúdo expandível.
data-expanded-icon data-icon Define o ícone do botão expandível quando o conteúdo está expandido. O padrão é "menos".
Define o ícone do elemento select. O padrão é "arrow-d". esquerda | direita | cima | baixo Define a posição do ícone. Pode ser left | right | top | bottom | notext.
data-inset true | false Define se o botão expandível deve ter estilos de bordas arredondadas e margens.
data-mini true | false Define se o botão expandível deve ser pequeno ou de tamanho normal.
data-theme letter (a-z) Define a cor do tema do botão expandível.

Collapsible Set

Bloco de conteúdo dentro do contêiner com a propriedade data-role="collapsible-set".

Atributos de Dados Valor Descrição
data-collapsed-icon data-icon Define o ícone do botão expandível. O padrão é "mais".
data-content-theme letter (a-z) Define a cor do tema do conteúdo expandível.
data-expanded-icon data-icon Define o ícone do botão expandível quando o conteúdo está expandido. O padrão é "menos".
Define o ícone do elemento select. O padrão é "arrow-d". data-iconpos Define a posição do ícone. Pode ser left | right | top | bottom | notext.
data-inset true | false Define se os collapsibles devem ter estilos de bordas arredondadas e margens.
data-mini true | false Define se o botão expandível deve ser pequeno ou de tamanho normal.
data-theme letter (a-z) Define a cor do tema do conjunto expandível.

Content

Contêiner com a propriedade data-role="content".

Atributos de Dados Valor Descrição
data-theme letter (a-z) Define a cor do tema do conteúdo. O padrão é "c".

Controlgroup

Contêiner <div> ou <fieldset> com a propriedade data-role="controlgroup". Combinar vários inputs de estilo de botão de único tipo (baseado em links, botões de rádio, caixas de seleção, menu de seleção).

Atributos de Dados Valor Descrição
data-mini true | false Define se a combinação deve ser de tamanho pequeno ou normal.
data-type horizontal | vertical Define se a combinação deve ser horizontal ou vertical.

Dialog

O contêiner ou link com data-role="dialog" ou data-rel="dialog".

Atributos de Dados Valor Descrição
data-close-btn-text sometext Define the text for the close button used only in dialogues.
data-dom-cache true | false Define whether to clear the jQuery DOM cache for individual pages (if set to true, it is necessary to manage the DOM and thoroughly test all mobile devices).
data-overlay-theme letter (a-z) Definir a cor de sobreposição (fundo) da página de diálogo.
data-theme letter (a-z) Define the theme color of the dialog page.
data-title sometext Define the title of the dialog page.

Enhancement

Container with attributes data-enhance="false" or data-ajax="false".

Atributos de Dados Valor Descrição
data-enhance true | false If set to "true" (default), jQuery Mobile will automatically add styles to the page to make it more suitable for mobile devices. If set to "false", the framework will not set the page's styles.
data-ajax true | false Define whether the page is loaded via AJAX.

Note:data-enhance="false", for example, combined with $.mobile.ignoreContentEnabled=true, to prevent jQuery Mobile from automatically adding page styles.

When $.mobile.ignoreContentEnabled is set to true, any links or form elements within containers with data-ajax="false" are ignored by the framework's navigation feature.

Fieldcontainer

Container wrapping the label/form elements with data-role="fieldcontain".

Fixed Toolbar

Container with attributes data-role="header" or data-role="footer" and data-position="fixed".

Atributos de Dados Valor Descrição
data-disable-page-zoom true | false Define whether the user can zoom the page.
data-fullscreen true | false Define whether the toolbar is always at the top and/or bottom.
data-tap-toggle true | false Define whether the user can toggle the visibility of the toolbar by tapping/clicking.
data-transition slide | fade | none Define the transition effect when a tap/click occurs.
data-update-page-padding true | false Define the update of the page's top, bottom, and inner padding when resize, transition, and "updatelayout" events occur (jQuery Mobile always updates the padding when the "pageshow" event occurs).
data-visible-on-page-show true | false Define the visibility of the toolbar when displaying the parent page.

Interruptor de Alternância Flip

Um elemento <select> com a propriedade data-role="slider" e dois elementos <option>.

Atributos de Dados Valor Descrição
data-mini true | false Especifica se o interruptor é pequeno ou de tamanho normal.
data-role none Impede que o jQuery Mobile defina o interruptor de alternância como estilo de botão.
data-theme letter (a-z) Especifica a cor do tema do interruptor de alternância.
data-track-theme letter (a-z) Especifica a cor do tema da faixa.

Rodapé

Container com a propriedade data-role="footer".

Atributos de Dados Valor Descrição
data-id sometext Especifica um ID único. É necessário para rodapés persistentes.
data-position inline | fixed Especifica se o rodapé deve ser relacionado ao conteúdo da página em linha ou permanecer na parte inferior.
data-fullscreen true | false Especifica se a página deve sempre estar na parte inferior e cobrir o conteúdo da página (ligeiramente transparente).
data-theme letter (a-z) Especifica a cor do tema do rodapé. O padrão é "a".

Note:Para ativar a posição fullscreen, use data-position="fixed" e adicione a propriedade data-fullscreen ao elemento.

Cabeçalho

Container com data-role="header".

Atributos de Dados Valor Descrição
data-id sometext Especifica um ID único. É necessário para cabeçalhos persistentes.
data-position inline | fixed Especifica se a barra de cabeçalho deve ser relacionada ao conteúdo da página em linha ou permanecer na parte superior.
data-fullscreen true | false Especifica se a página deve sempre estar na parte superior e cobrir o conteúdo da página (ligeiramente transparente).
data-theme letter (a-z) Especifica a cor do tema da barra de cabeçalho. O padrão é "a".

Note:Para ativar a posição fullscreen, use data-position="fixed" e adicione a propriedade data-fullscreen ao elemento.

Link

Todos os links, incluindo os links com data-role="button" e os botões de envio de formulários.

Atributos de Dados Valor Descrição
data-ajax true | false Especifica se a página deve ser carregada via AJAX para melhorar a experiência do usuário e a transição. Se definido como false, o jQuery Mobile fará uma solicitação de página normal.
data-direction inverter Inverte a animação de transição (apenas para páginas ou diálogos).
data-dom-cache true | false Definir se deve limpar o cache do jQuery DOM da página individual (se definido como true, você deve prestar atenção à gestão do DOM e testar completamente todos os dispositivos móveis).
data-prefetch true | false Especifica se a página deve ser pré-carregada no DOM para estar disponível no acesso do usuário.
data-rel voltar | diálogo | externo | pop-up Especifica as opções de comportamento dos links. Voltar - Mover um passo para trás no histórico. Diálogo - Abre a página como um diálogo, sem registrar no histórico. Externo - Liga para outro domínio. Abre - Abre uma janela pop-up.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | none Definir como passar de uma página para a próxima. Consulte a transição jQuery Mobile.
data-position-to origem | selector jQuery | janela Definir a posição do pop-up. Origem - Padrão. Ao abrir o link, ele aparecerá em uma janela pop-up. jQuery selector - Pop up on the specified element. Window - Pop up in the middle of the window screen.

List

The <ol> or <ul> with the attribute data-role="listview".

Atributos de Dados Valor Descrição
data-autodividers true | false Define whether to automatically separate list items.
data-count-theme letter (a-z) Define the theme color of the bubble count. The default is "c".
data-divider-theme letter (a-z) Define the theme color of the list separator. The default is "b".
data-filter true | false Define whether to add a search box to the list.
data-filter-placeholder sometext Define the text in the search box. The default is "Filter items...".
data-filter-theme letter (a-z) Define the theme color of the search filter. The default is "c".
Todos os elementos <select>. Será automaticamente aplicado estilo de botão, sem necessidade de date-role. data-icon Define the icon of the list.
data-inset true | false Define whether to add rounded corners and margin styles to the list.
data-split-icon data-icon Define the icon of the split button. The default is "arrow-r".
data-split-theme letter (a-z) Define the theme color of the split button. The default is "b".
data-theme letter (a-z) Define the theme color of the list.

List item

The <li> inside the <ol> or <ul> with the attribute data-role="listview".

Atributos de Dados Valor Descrição
data-filtertext sometext Define the text to be searched when filtering elements. This text, rather than the actual text of the list item, will be searched.
Todos os elementos <select>. Será automaticamente aplicado estilo de botão, sem necessidade de date-role. data-icon Define the icon of the list item.
data-role list-divider Define the separator of the list item.
data-theme letter (a-z) Define the theme color of the list item.

Note:The data-icon attribute is only applicable to list items that contain links.

Navbar

The <li> element inside the container with the attribute data-role="navbar".

Atributos de Dados Valor Descrição
Todos os elementos <select>. Será automaticamente aplicado estilo de botão, sem necessidade de date-role. data-icon Define the icon of the list item.
Define o ícone do elemento select. O padrão é "arrow-d". data-iconpos Define a posição do ícone. Pode ser left | right | top | bottom | notext.

Dica:The navigation bar inherits the theme-swatch from its parent container. It is not possible to set the data-theme attribute for the navigation bar. The data-theme attribute can be set separately for each link in the navbar.

Page

Container with the attribute data-role="page".

Atributos de Dados Valor Descrição
data-add-back-btn true | false Automatically add a back button, only for the header.
data-back-btn-text sometext Define the text of the back button.
data-back-btn-theme letter (a-z) Define the theme color of the back button.
data-close-btn-text letter (a-z) Define the text of the close button on the dialog.
data-dom-cache true | false Definir se deve limpar o cache do jQuery DOM da página individual (se definido como true, você deve prestar atenção à gestão do DOM e testar completamente todos os dispositivos móveis).
data-overlay-theme letter (a-z) Definir a cor de sobreposição (fundo) da página de diálogo.
data-theme letter (a-z) Definir a cor do tema da página. Padrão é "c".
data-title sometext Definir o título da página.
data-url url Este valor é usado para atualizar a URL, não para fazer solicitações de página.

Popup

Container com atributo data-role="popup":

Atributos de Dados Valor Descrição
data-corners true | false Definir se o pop-up tem cantos arredondados.
data-overlay-theme letter (a-z) Definir a cor de sobreposição (fundo) do pop-up. Padrão é fundo transparente (none).
data-shadow true | false Definir se o pop-up tem sombra.
data-theme letter (a-z) Definir a cor do tema do pop-up. Padrão é herdar, "none" define como transparente.
data-tolerance 30, 15, 30, 15 Definir a distância do limite da janela (topo, direita, fundo, esquerda).

Âncora com atributo data-rel="popup":

Atributos de Dados Valor Descrição
data-position-to origem | selector jQuery | janela Definir a posição do pop-up. Origem - padrão. O pop-up está no link que o abre. Selector jQuery - O pop-up está no elemento especificado. Janela - O pop-up está no centro da tela da janela.
data-rel popup Usado para abrir pop-ups.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | none Definir como passar de uma página para a próxima. Consulte a transição jQuery Mobile.

Botão de Opção de Rádio

label e input com type="radio" serão automaticamente definidos como estilo de botão, sem necessidade de data-role.

Atributos de Dados Valor Descrição
data-mini true | false Definir se o botão deve ser pequeno ou de tamanho normal.
data-role none Colocar jQuery Mobile define o estilo do botão de opção como enhanced buttons.
data-theme letter (a-z) Definir a cor do tema do botão de opção.

Dica:Para combinar vários botões de opção, use data-role="controlgroup" e data-type="horizontal|vertical" para determinar se os botões devem ser combinados horizontalmente ou verticalmente.

Select

Select

Atributos de Dados Valor Descrição
Todos os elementos <select>. Será automaticamente aplicado estilo de botão, sem necessidade de date-role. data-icon Icons Reference
Define o ícone do elemento select. O padrão é "arrow-d". data-iconpos Define a posição do ícone. Pode ser left | right | top | bottom | notext.
data-inline true | false Define se o elemento select é inline.
data-mini true | false Define se o elemento select é pequeno ou de tamanho normal.
data-native-menu true | false Se definido como false, usará o menu de seleção personalizado do jQuery próprio (se desejar que o menu de seleção tenha um aspecto consistente em todos os dispositivos móveis, é recomendado usar).
data-overlay-theme letter (a-z) Define a cor do tema do menu de seleção personalizado do jQuery (usado junto com data-native-menu="false").
data-placeholder true | false Pode ser aplicado ao elemento <option> de select não nativo.
data-role none Aplica estilo ao elemento select do jQuery Mobile.
data-theme letter (a-z) Define a cor do tema do elemento select.

Dica:Para combinar vários elementos select, use data-role="controlgroup" e data-type="horizontal|vertical" para definir se deve ser combinado horizontalmente ou verticalmente.

Slider

Elemento de entrada com type="range". Será automaticamente aplicado estilo de botão, sem necessidade de data-role.

Atributos de Dados Valor Descrição
data-highlight true | false Define se a faixa do deslizador deve ser destacada.
data-mini true | false Define se o deslizador é pequeno ou de tamanho normal.
data-role none Aplica estilo ao botão de configuração do deslizador do jQuery Mobile.
data-theme letter (a-z) Define a cor do tema do controle do deslizador (input, handle e track).
data-track-theme letter (a-z) Define a cor do tema da faixa do deslizador.

Entrada de texto e Textarea

Elemento de entrada ou textarea com type="text|search|etc.". Será automaticamente aplicado estilo, sem necessidade de data-role.

Atributos de Dados Valor Descrição
data-mini true | false Define se o elemento input é pequeno ou de tamanho normal.
data-role none Coloca o jQuery Mobile que define o estilo do botão input/textarea.
data-theme letter (a-z) Define a cor do tema do campo de entrada.