Comentário: Talvez quando você usa o JQuery Mobile, você geralmente verá o uso do controle de dados, o tema de dados etc. Esses são atributos personalizados HTML5. Este artigo compilou alguns. Amigos que precisam podem se referir a ele.
Talvez quando você usa o JQuery Mobile, muitas vezes verá o controle de dados, o tema de dados etc., por exemplo: o código a seguir pode alcançar o efeito do cabeçalho:
<div data role = "cabeçalho">
<H1> eu sou o título </h1>
</div>
Navegue pelo seu telefone celular, o efeito é o seguinte:
Por que você pode alcançar o efeito do preto na parte inferior e centralizar o texto escrevendo um cabeçalho de correio de dados =?
Este artigo fornece a maneira mais simples de implementá -lo, para que todos possam ter um entendimento intuitivo desses usos.
Escrevemos uma página HTML para personalizar um atributo de dados-chb = cabeçalho. Esperamos que a cor de fundo da área div com esse atributo seja preta, o texto seja branco e o centro é exibido; O DIV que não possui atributo personalizado Data-Chb é exibido no modo padrão. O código HTML é o seguinte:
<Body>
<div data-chb = "cabeçalho">
<H1> usei a div do atributo Data-Chb Custom </h1>
</div>
<br/>
<div>
Não usei o Data-Chb para personalizar os atributos, então eu os mostraria como deveriam;
</div>
</body>
Para alcançar o efeito de exibição da cor do fundo preto, texto em branco e tela central, definimos o seguinte CSS:
<estilo>
.ui_header {
Background-Color: Black;
Alinhamento de texto: centro;
Cor: Branco;
borda: 1px sólido #000;
}
</style>
Em seguida, usamos o seguinte método JS para adicionar dinamicamente as definições de CSS quando a página é carregada e altere o estilo de exibição da div com o atributo Data-Chb:
<script type = "text/javascript">
window.onload = function () {
var elems = document.getElementsByTagName ("div");
if (elems! = null && elems.length> 0) {
var comprimento = elems.length;
// transfundem todos os controles da div
for (var i = 0; i <comprimento; i ++) {
var elem = elems [i];
// Obtenha as propriedades personalizadas do controle
var customAttr = elem.dataset.chb;
// você também pode obter propriedades personalizadas pelo método a seguir
// var customAttr = elem.dataset ["chb"];
// Se for o valor do cabeçalho que temos predefinidos, significa que precisa ser processado
if (customAttr == "cabeçalho") {
// Adicionar estilo
elem.setattribute ("classe", "ui_header");
}
}
}
}
</script>
A página final exibe o seguinte efeito:
As pessoas sempre gostam de adicionar propriedades personalizadas às tags HTML para armazenar e manipular dados. Mas o problema de fazer isso é que você não sabe se outros scripts redefinirão suas propriedades personalizadas no futuro. Além disso, sua sintaxe HTML não cumpre as especificações HTML, bem como com alguns outros efeitos colaterais. É por isso que você adicionou uma propriedade de dados personalizada à especificação HTML5 e pode fazer muitas coisas úteis com ela.
Você pode ler as especificações detalhadas do HTML5, mas o uso desse atributo de dados personalizado é muito simples. Você pode adicionar qualquer atributo começando com dados à tag HTML. Esses atributos não são exibidos na página. Não afetará o layout e o estilo da sua página, mas é legível e gravável.
O snippet a seguir é uma tag html5 válida:
<div
Data-myid = "3E4AE6C4E"> Alguns dados impressionantes </div>
Mas, como você lê esses dados? Você certamente pode iterar através dos elementos da página para ler as propriedades desejadas, mas o JQuery possui métodos internos para manipular essas propriedades. Use o método .Data () do jQuery para acessar essas propriedades. Um dos métodos é .Data (OBJ), que aparece após a versão do JQuery 1.4.3, e pode retornar o atributo de dados correspondente.
Por exemplo, você pode usar o seguinte método de escrita para ler o valor do atributo Data-Myid:
var myid = jQuery ("#Awesome"). Dados ('myid');
console.log (myid); Você também pode usar a sintaxe JSON na propriedade Data-*, por exemplo, se você escrever o seguinte HTML:
<div data-awome = '{"Game": "ON"}'> </div>
Você pode acessar diretamente esses dados através do JS. Através do valor chave do JSON, você pode obter o valor correspondente:
var gamestatus = jQuery ("#Awesome-json"). Dados ('Awesome'). Game;
console.log (gamestatus); Você também pode atribuir valores ao atributo Data-* diretamente através do método .Data (chave, valor). Uma coisa importante em que você precisa prestar atenção é que esses atributos de dados devem estar relacionados ao elemento em que estão e não os tratam como ferramentas de armazenamento para armazenar qualquer coisa.
O tradutor adiciona: Embora os dados-* sejam um atributo que apareça apenas no HTML5, o jQuery é universal; portanto, em páginas ou navegadores não html5, você ainda pode usar o método .data (obj) para manipular dados.