Commentaire: Peut-être que lorsque vous utilisez jQuery Mobile, vous verrez souvent l'utilisation de la data-role, du thème des données, etc. Ce sont des attributs personnalisés HTML5. Cet article en a compilé. Les amis qui en ont besoin peuvent y faire référence.
Peut-être que lorsque vous utilisez jQuery Mobile, vous verrez souvent des données de données, du thème des données, etc., par exemple: le code suivant peut réaliser l'effet de l'en-tête:
<div data-role = "header">
<h1> Je suis le titre </h1>
</div>
Parcourez votre téléphone portable, l'effet est le suivant:
Pourquoi pouvez-vous réaliser l'effet du noir en bas et centrer le texte en écrivant un en-tête Data-Role =?
Cet article fournit le moyen le plus simple de le mettre en œuvre, afin que tout le monde puisse avoir une compréhension intuitive de ces usages.
Nous écrivons une page HTML pour personnaliser un attribut data-chb = en-tête. Nous espérons que la couleur d'arrière-plan de la zone Div avec cet attribut est noire, le texte est blanc et le centre est affiché; L'attribut personnalisé DIV qui n'a pas de données-chb s'affiche dans le mode par défaut. Le code HTML est le suivant:
<body>
<div data-chb = "header">
<h1> J'ai utilisé la div de l'attribut personnalisé de données-chb </h1>
</div>
<br/>
<div>
Je n'ai pas utilisé Data-CHB pour personnaliser les attributs, donc je les montrerais comme ils le devraient;
</div>
</docy>
Pour obtenir l'effet d'affichage de la couleur d'arrière-plan noir, du texte blanc et de l'affichage central, nous définissons le CSS suivant:
<style>
.ui_header {
Color en arrière-plan: noir;
Texte-aligne: Centre;
Couleur: blanc;
bordure: 1px solide # 000;
}
</ style>
Ensuite, nous utilisons la méthode JS suivante pour ajouter dynamiquement les définitions CSS lorsque la page est chargée et modifier le style d'affichage de la div avec l'attribut de données-chb:
<script type = "text / javascript">
window.onload = function () {
var elems = document.getElementsByTagName ("div");
if (elems! = null && elems.length> 0) {
var longueur = elems.length;
// transfuser tous les contrôles div
pour (var i = 0; i <longueur; i ++) {
var elem = elems [i];
// Obtenez les propriétés personnalisées du contrôle
var customAttr = elem.dataset.chb;
// Vous pouvez également obtenir des propriétés personnalisées selon la méthode suivante
// var customAttr = elem.dataset ["chb"];
// Si c'est la valeur d'en-tête que nous avons prédéfinie, cela signifie qu'il doit être traité
if (customAtTr == "En-tête") {
// ajouter du style
elem.setAttribute ("class", "ui_header");
}
}
}
}
</cript>
La page finale affiche l'effet suivant:
Les gens aiment toujours ajouter des propriétés personnalisées aux balises HTML pour stocker et manipuler des données. Mais le problème de cela est que vous ne savez pas si d'autres scripts réinitialiseront vos propriétés personnalisées à l'avenir. De plus, votre syntaxe HTML ne respecte pas les spécifications HTML, ainsi que d'autres effets secondaires. C'est pourquoi vous avez ajouté une propriété de données personnalisée à la spécification HTML5, et vous pouvez faire beaucoup de choses utiles avec.
Vous pouvez lire les spécifications détaillées de HTML5, mais l'utilisation de cet attribut de données personnalisé est très simple. Vous pouvez ajouter n'importe quel attribut en commençant par des données - à la balise HTML. Ces attributs ne sont pas affichés sur la page. Cela n'affectera pas la mise en page et le style de votre page, mais il est lisible et écrit.
L'extrait suivant est une balise HTML5 valide:
<div
data-myid = "3e4ae6c4e"> quelques données impressionnantes </div>
Mais comment lisez-vous ces données? Vous pouvez certainement parcourir les éléments de la page pour lire les propriétés que vous souhaitez, mais JQuery a des méthodes intégrées pour manipuler ces propriétés. Utilisez la méthode .data () de jQuery pour accéder à ces propriétés de données. L'une des méthodes est .data (OBJ), qui apparaît après la version jQuery 1.4.3, et il peut renvoyer l'attribut de données correspondant.
Par exemple, vous pouvez utiliser la méthode d'écriture suivante pour lire la valeur d'attribut Data-Myid:
var myid = jQuery ("# génial"). Data ('MyId');
console.log (MyID); Vous pouvez également utiliser la syntaxe JSON dans la propriété Data- *, par exemple, si vous écrivez le HTML suivant:
<div data-awesome = '{"jeu": "on"}'> </div>
Vous pouvez accéder directement à ces données via JS. Grâce à la valeur clé de JSON, vous pouvez obtenir la valeur correspondante:
var gameStatus = jQuery ("# Awesome-Json"). Data ('Awesome'). Game;
Console.log (GameStatus); Vous pouvez également attribuer des valeurs à l'attribut Data- * directement via la méthode .data (clé, valeur). Une chose importante à laquelle vous devez faire attention est que ces attributs de données - * doivent être liés à l'élément dans lequel ils se trouvent et ne les traitent pas comme des outils de stockage pour stocker quoi que ce soit.
Le traducteur ajoute: Bien que les données- * soit un attribut qui n'apparaît que dans HTML5, jQuery est universel, donc dans les pages ou les navigateurs non-HTML5, vous pouvez toujours utiliser la méthode .data (obj) pour manipuler les données.