jQuery Mobile - Atributos de dados
Botão
Ele especifica um botão clicável que inclui conteúdo como texto ou imagens usando a classe ui-btn . Ele está obsoleto na versão 1.4. Use o atributo ui-btn em vez de usar o atributo data-role = "button" .
A tabela a seguir lista os elementos de botão usados com o atributo de dados.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-corners Ele define se o botão deve conter cantos arredondados ou não. |
verdade | falso |
2 | data-icon Ele define o ícone do botão. |
O padrão é nenhum ícone |
3 | data-iconpos Ele define a posição do ícone. |
esquerda | certo | topo | inferior |
4 | data-iconshadow Define se o ícone do botão deve conter sombra ou não. |
verdade | falso |
5 | data-inline Ele define se o botão deve ser embutido ou não. |
verdade | falso |
6 | data-mini Ele define se o botão deve ser exibido em tamanho menor ou em tamanho normal. |
verdade | falso |
7 | data-shadow Ele define se o botão deve conter sombra ou não. |
verdade | falso |
8 | data-theme Ele exibe a cor do tema para o botão. |
letra (az) |
Caixa de seleção
A tabela a seguir lista os elementos da caixa de seleção usados com type = "checkbox".
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-mini Ele define se a caixa de seleção deve ser exibida em tamanho menor ou em tamanho normal. |
verdade | falso |
2 | data-role Ele para de estilizar as caixas de seleção como botões. |
Nenhum |
3 | data-theme Ele exibe a cor do tema para a caixa de seleção. |
letra (az) |
Dobrável
A tabela a seguir lista os elementos recolhíveis usados com data-role = "collapsible" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-collapsed Indica se o conteúdo deve ser fechado ou expandido. |
verdade | falso |
2 | data-collapsed-cue-text Ele exibe feedback para usuários com software de leitor de tela. |
O padrão é recolher conteúdo |
3 | data-collapsed-icon Ele define o ícone do botão recolhível. |
O ícone padrão é "mais" |
4 | data-content-theme Ele exibe a cor do tema para o conteúdo recolhível. |
letra (az) |
5 | data-expanded-cue-text Ele exibe feedback para usuários com software de leitor de tela. |
O padrão é expandir o conteúdo |
6 | data-expanded-icon Ele exibe o botão recolhível quando você expande o conteúdo. |
O ícone padrão é "menos" |
7 | data-iconpos Ele define a posição do ícone. |
esquerda | certo | topo | inferior |
8 | data-inset Ele define se o botão recolhível deve ser exibido com cantos e margens arredondados ou não. |
verdade | falso |
9 | data-mini Ele define se os botões recolhíveis devem ser exibidos em tamanho menor ou em tamanho normal. |
verdade | falso |
10 | data-theme Ele exibe a cor do tema para o botão recolhível. |
letra (az) |
Conjunto dobrável
A tabela a seguir lista os elementos do conjunto recolhível usados com o data-role = "collapsibleset" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-collapsed-icon Ele define o ícone do botão recolhível. |
O ícone padrão é "mais" |
2 | data-content-theme Ele exibe a cor do tema para o conteúdo recolhível. |
letra (az) |
3 | data-expanded-icon Ele exibe o botão recolhível quando você expande o conteúdo. |
O ícone padrão é "menos" |
4 | data-iconpos Ele define a posição do ícone. |
esquerda | certo | topo | inferior |
5 | data-inset Ele define se o botão recolhível deve ser exibido com cantos e margens arredondados ou não. |
verdade | falso |
6 | data-mini Ele define se os botões recolhíveis devem ser exibidos em tamanho menor ou em tamanho normal. |
verdade | falso |
7 | data-theme Ele exibe a cor do tema para o botão recolhível. |
letra (az) |
Grupo de controle
A tabela a seguir lista os elementos do grupo de controle usados com data-role = "controlgroup" atributo -
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-exclude-invisible Ele define se os filhos invisíveis devem ser excluídos na atribuição de cantos arredondados. |
verdade | falso |
2 | data-mini Ele define se o grupo deve ser exibido em tamanho menor ou em tamanho normal. |
verdade | falso |
3 | data-theme Ele exibe a cor do tema para o grupo de controle. |
letra (az) |
4 | data-type Indica se o grupo deve ser exibido no formato horizontal ou vertical. |
horizontal | vertical |
Diálogo
A tabela a seguir lista os elementos da caixa de diálogo usados com data-dialog="true" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-close-btn Ele define a posição do botão Fechar. |
esquerda | certo | Nenhum |
2 | data-close-btn-text Ele define o texto do botão Fechar. |
texto |
3 | data-corners Ele define se o diálogo deve ser exibido com cantos arredondados ou não. |
verdade | falso |
4 | data-dom-cache Indica se o cache DOM deve ser limpo ou não para páginas individuais. |
verdade | falso |
5 | data-overlay-theme Ele define a cor de sobreposição da página de diálogo. |
letra (az) |
6 | data-theme Ele define a cor do tema da página de diálogo. |
letra (az) |
7 | data-title Ele define o título da página do diálogo. |
texto |
Aprimoramento
A tabela a seguir lista os elementos de aprimoramento usados com data-enhance="false" or data-ajax = "false" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-enhance Você pode estilizar a página definindo este atributo como "true". Você não pode estilizar a página se ela estiver definida como "falsa". |
verdade | falso |
2 | data-ajax Indica se as páginas devem carregar do Ajax ou não. |
verdade | falso |
Barra de ferramentas fixa
A tabela a seguir lista os elementos da barra de ferramentas usados com data-position = "fixed" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-disable-page-zoom Ele define se o usuário é capaz de dimensionar / ampliar a página ou não. |
verdade | falso |
2 | data-fullscreen Ele define que as barras de ferramentas devem ser posicionadas na parte superior e / ou inferior. |
verdade | falso |
3 | data-tap-toggle Ele indica se o usuário pode alternar a visibilidade da barra de ferramentas nos toques ou não. |
verdade | falso |
4 | data-transition Ele mostra um efeito de transição quando você toca ou clica no elemento. |
slide | desvanece-se | Nenhum |
5 | data-update-page-padding Ele atualiza o preenchimento da página usando eventos de redimensionamento, transição e atualização de layout. |
verdade | falso |
6 | data-visible-on-page-show Ele define a visibilidade da barra de ferramentas quando a página pai é exibida. |
verdade | falso |
Botão giratório
A tabela a seguir lista os elementos de alternância alternada usados com data-role = "flipswitch" atributo -
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-mini Ele define se o switch deve ser exibido em tamanho menor ou em tamanho normal. |
verdade | falso |
2 | data-on-text Ele define o texto "on" no botão giratório. |
O padrão é "ativado" |
3 | data-off-text Ele define o texto "desligado" no botão giratório. |
O padrão é "desligado" |
Rodapé
A tabela a seguir lista os elementos de rodapé usados com o atributo data-role = "footer" -
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-id Ele define o ID exclusivo. |
texto |
2 | data-position Ele define se o rodapé deve ser posicionado na parte inferior ou alinhado com o conteúdo da página. |
inline | fixo |
3 | data-fullscreen Define se o rodapé deve ser posicionado na parte inferior e sobre o conteúdo da página ou não. |
verdade | falso |
4 | data-theme Ele define a cor do tema do rodapé. |
letra (az) |
Cabeçalho
A tabela a seguir lista os elementos de cabeçalho usados com data-role = "header" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-id Ele define o ID exclusivo. |
texto |
2 | data-position Ele define se o cabeçalho deve ser posicionado na parte inferior ou alinhado com o conteúdo da página. |
inline | fixo |
3 | data-fullscreen Ele define se o cabeçalho deve ser posicionado na parte inferior e sobre o conteúdo da página ou não. |
verdade | falso |
4 | data-theme Ele define a cor do tema do cabeçalho. |
letra (az) |
Entradas
A tabela a seguir lista os elementos de entrada usados com type = "text|search|etc" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-clear-btn Ele define se o elemento de entrada deve conter o botão Limpar ou não. |
verdade | falso |
2 | data-clear-btn-text Ele define o texto do botão limpar. |
texto |
3 | data-mini Ele define se a entrada deve ser exibida em tamanho menor ou tamanho normal. |
verdade | falso |
4 | data-role Ele para de estilizar a entrada ou áreas de texto como botões. |
Nenhum |
5 | data-theme Ele define a cor do tema do elemento de entrada. |
letra (az) |
Ligação
A tabela a seguir lista os elementos de link usados com jQuery Mobile.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-ajax Indica se as páginas devem ser carregadas por meio do Ajax ou não. |
verdade | falso |
2 | data-direction É usado para transição reversa. |
reverter |
3 | data-dom-cache Indica se o cache do jQuery DOM deve ser limpo ou não para as páginas. |
verdade | falso |
4 | data-prefetch É usado para pré-buscar as páginas no DOM. |
verdade | falso |
5 | data-rel Ele especifica o comportamento do link. |
voltar | diálogo | externo | Aparecer |
6 | data-transition Ele define a transição de uma página para outra. |
desvanece-se | flip | fluxo | pop | slide | deslizado | slidefade | slideup | por sua vez | Nenhum |
7 | data-position-to Ele define a posição das caixas pop-up. |
origem | seletor jQuery | janela |
Lista
A tabela a seguir mostra os elementos da lista usados com data-role = "listview" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-autodividers Ele divide a lista automaticamente. |
verdade | falso |
2 | data-count-theme Ele define a cor do tema do elemento de contagem. |
letra (az) |
3 | data-divider-theme Ele define a cor do tema para o divisor de lista. |
letra (az) |
4 | data-filter É usado para filtrar os valores da lista na caixa de pesquisa. |
verdade | falso |
5 | data-filter-placeholder Ele define algum texto dentro da caixa de pesquisa. |
texto |
6 | data-filter-theme Ele define a cor do tema para o filtro de pesquisa. |
letra (az) |
7 | data-icon Ele fornece o ícone da lista. |
O padrão é nenhum ícone |
8 | data-inset Ele define se a lista deve ser exibida com cantos arredondados e margens ou não. |
verdade | falso |
9 | data-split-icon Ele define o ícone do botão de divisão. |
O ícone padrão é "arrow-r" |
10 | data-split-theme Ele define a cor do tema para o botão de divisão. |
letra (az) |
11 | data-theme Ele define a cor do tema da lista. |
letra (az) |
Item da lista
A tabela a seguir mostra os elementos do item da lista usados com data-role = "listview" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-filtertext Ele é usado para filtrar os valores da lista usando o texto na caixa de pesquisa. |
texto |
2 | data-icon Ele fornece o ícone para o item da lista. |
O padrão é nenhum ícone |
3 | data-role Ele define o divisor para os itens da lista. |
divisor de lista |
4 | data-theme Ele define a cor do tema para o item da lista. |
letra (az) |
Navbar
A tabela a seguir lista os elementos da barra de navegação usados com data-role = "navbar" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-icon Ele fornece o ícone para o item da lista. |
O padrão é nenhum ícone |
2 | data-iconpos Ele define a posição do ícone. |
esquerda | certo | topo | inferior | nenhum texto |
Página
A tabela a seguir lista os elementos da página usados com data-role = "page" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-dom-cache Indica se o cache DOM deve ser limpo ou não para páginas individuais. |
verdade | falso |
2 | data-overlay-theme Ele define a cor de sobreposição das páginas de diálogo. |
letra (az) |
3 | data-theme Ele define a cor do tema da página. |
letra (az) |
4 | data-title Ele fornece o título da página. |
O padrão é nenhum ícone |
5 | data-url É usado para atualizar o URL. |
url |
Aparecer
A tabela a seguir lista os elementos pop-up usados com data-role = "popup" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-corners Ele define se o pop-up deve ser exibido com cantos e margens arredondados ou não. |
verdade | falso |
2 | data-dismissible Ele define se o pop-up deve ser fechado clicando fora ou não. |
verdade | falso |
3 | data-history Ele define se o pop-up deve exibir o histórico do item quando aberto. |
verdade | falso |
4 | data-overlay-theme Ele define a cor de sobreposição da caixa pop-up. |
letra (az) |
5 | data-shadow Ele exibe a sombra da caixa pop-up. |
verdade | falso |
6 | data-theme Ele define a cor do tema para a caixa pop-up. |
letra (az) |
7 | data-tolerance Ele define as bordas da janela. |
30, 15, 30, 15 |
Botao de radio
A tabela a seguir lista os elementos de botão de opção usados com type = "radio" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-mini Ele define se o botão deve ser exibido em tamanho menor ou em tamanho normal. |
verdade | falso |
2 | data-role Ele interrompe o estilo dos botões de opção como botões aprimorados. |
Nenhum |
3 | data-theme Ele define a cor do tema para o botão de rádio. |
letra (az) |
Selecione
A tabela a seguir lista os elementos selecionados usados com jQuery Mobile.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-icon Ele fornece o ícone para o elemento selecionado. |
O padrão é "arrow-d" |
2 | data-iconpos Ele define a posição do ícone. |
esquerda | certo | topo | inferior |
3 | data-inline Ele define se o botão deve ser embutido ou não. |
verdade | falso |
4 | data-mini Ele define se o select deve ser exibido em tamanho menor ou tamanho normal. |
verdade | falso |
5 | data-native-menu Ele usa o menu personalizado quando definido como falso. |
verdade | falso |
6 | data-overlay-theme Ele define a cor de sobreposição para o menu de seleção personalizado. |
letra (az) |
7 | data-placeholder É usado para definir um elemento de opção de seleção não nativa. |
verdade | falso |
8 | data-role Ele interrompe o estilo de elementos selecionados como botões. |
Nenhum |
9 | data-theme Ele exibe a cor do tema para os elementos selecionados. |
letra (az) |
Slider
A tabela a seguir lista os elementos deslizantes usados com type = "range" atributo.
Sr. Não. | Atributo de dados e descrição | Valor |
---|---|---|
1 | data-highlight Ele destaca o controle deslizante. |
verdade | falso |
2 | data-mini Ele define se o controle deslizante deve ser exibido em tamanho menor ou em tamanho normal. |
verdade | falso |
3 | data-role Ele interrompe o estilo dos controles deslizantes como botões. |
Nenhum |
4 | data-theme Ele exibe a cor do tema para o controle deslizante. |
letra (az) |
5 | data-track-theme Ele exibe a cor do tema para o controle deslizante. |
letra (az) |