Kommentar: Wenn Sie JQuery Mobile verwenden, werden Sie häufig die Verwendung von Datenrollen, Datenthemen usw. sehen. Dies sind HTML5-benutzerdefinierte Attribute. Dieser Artikel hat einige zusammengestellt. Freunde, die es brauchen, können sich darauf beziehen.
Wenn Sie JQuery Mobile verwenden, sehen Sie möglicherweise häufig Data-Rollen, Daten-Themen usw., zum Beispiel: Der folgende Code kann den Effekt des Headers erzielen:
<div dat-role = "header">
<h1> Ich bin der Titel </h1>
</div>
Durchsuchen Sie Ihr Mobiltelefon, der Effekt ist wie folgt:
Warum können Sie den Effekt von Schwarz unten erreichen und den Text zentrieren, indem Sie eine Data-Role = Header schreiben?
Dieser Artikel bietet den einfachsten Weg, um es zu implementieren, damit jeder ein intuitives Verständnis für diese Verwendungen haben kann.
Wir schreiben eine HTML-Seite, um ein Data-Chb = Header-Attribut anzupassen. Wir hoffen, dass die Hintergrundfarbe des Div -Bereichs mit diesem Attribut schwarz ist, der Text weiß und das Zentrum angezeigt wird. Das DIV, das kein Data-CHB-benutzerdefiniertes Attribut enthält, wird im Standardmodus angezeigt. Der HTML -Code lautet wie folgt:
<body>
<div data-chb = "header">
<h1> Ich habe das Div des benutzerdefinierten Attributs von Data-Chb </h1> verwendet
</div>
<br/>
<div>
Ich habe Daten-CHB nicht verwendet, um die Attribute anzupassen, daher würde ich sie so zeigen, wie sie sollten.
</div>
</body>
Um den Display -Effekt von schwarzer Hintergrundfarbe, weißer Text und mittlerer Anzeige zu erreichen, definieren wir die folgenden CSS:
<Styles>
.ui_header {
Hintergrundfarbe: Schwarz;
Text-Align: Mitte;
Farbe: weiß;
Grenze: 1PX Solid #000;
}
</style>
Anschließend verwenden wir die folgende JS-Methode, um CSS-Definitionen dynamisch hinzuzufügen, wenn die Seite geladen wird, und ändern den Anzeigstil des DIV mit dem Data-CHB-Attribut:
<script type = "text/javaScript">
window.onload = function () {
var elems = document.getElementsByTagName ("div");
if (elems! = null && elems.length> 0) {
var länge = Elems.length;
// Alle Div -Kontrollen transfusieren
für (var i = 0; i <länge; i ++) {
var elem = elem [i];
// Erhalten Sie die benutzerdefinierten Eigenschaften der Kontrolle
var Customattr = Elem.Dataset.Chb;
// Sie können nach der folgenden Methode auch benutzerdefinierte Eigenschaften erhalten
// var Customattr = Elem.Dataset ["CHB"];
// Wenn es sich um den Header -Wert handelt, den wir vordefiniert haben, muss er verarbeitet werden
if (Customattr == "Header") {
// Stil hinzufügen
Elem.SetatTribute ("Klasse", "ui_header");
}
}
}
}
</script>
Die letzte Seite zeigt den folgenden Effekt an:
Menschen fügen HTML -Tags immer gerne benutzerdefinierte Eigenschaften hinzu, um Daten zu speichern und zu manipulieren. Das Problem dabei ist jedoch, dass Sie nicht wissen, ob andere Skripte Ihre benutzerdefinierten Eigenschaften in Zukunft zurücksetzen. Darüber hinaus entspricht Ihre HTML -Syntax nicht den HTML -Spezifikationen sowie einigen anderen Nebenwirkungen. Aus diesem Grund haben Sie der HTML5 -Spezifikation eine benutzerdefinierte Dateneigenschaft hinzugefügt und können viele nützliche Dinge damit tun.
Sie können die detaillierten Spezifikationen von HTML5 lesen, aber die Verwendung dieses benutzerdefinierten Datenattributs ist sehr einfach. Sie können das HTML-Tag jedes Attribut hinzufügen. Diese Attribute werden auf der Seite nicht angezeigt. Es wird sich nicht auf Ihr Seitenlayout und Ihr Seitenstil auswirken, aber es ist lesbar und beschreibbar.
Das folgende Ausschnitt ist ein gültiges HTML5 -Tag:
<div
Data-Myid = "3E4AE6C4E"> Einige großartige Daten </div>
Aber wie lesen Sie diese Daten? Sie können sicherlich die Seitenelemente durchführen, um die gewünschten Eigenschaften zu lesen, aber JQuery verfügt über integrierte Methoden, um diese Eigenschaften zu manipulieren. Verwenden Sie die .Data () -Methode von JQuery, um auf diese Daten zugreifen zu können. Eine der Methoden ist .Data (OBJ), die nach der JQuery 1.4.3 -Version erscheint und das entsprechende Datenattribut zurückgeben kann.
Beispielsweise können Sie die folgende Schreibmethode verwenden, um den Daten-Myid-Attributwert zu lesen:
var myid = jQuery ("#fantastisch"). Daten ('myid');
console.log (Myid); Sie können die JSON-Syntax auch in der Dateneigenschaft verwenden, z. B. wenn Sie das folgende HTML schreiben:
<div data-awesome = '{"game": "on"}'> </div>
Sie können diese Daten über JS direkt zugreifen. Durch den Schlüsselwert von JSON können Sie den entsprechenden Wert erhalten:
var gamestatus = jQuery ("#Awesome-Json"). Daten ('Awesome'). Spiel;
console.log (gamestatus); Sie können dem Data-* -attribut auch direkt über die .data-Methode (Schlüssel, Wert, Wert) zuweisen. Eine wichtige Sache, auf die Sie achten müssen, ist, dass diese Datenattribute mit dem Element zusammenhängen sollten, in dem sie sich befinden, und sie nicht als Speicherwerkzeuge für die Speicherung von irgendetwas behandeln.
Übersetzer fügt hinzu: Obwohl Data-* ein Attribut ist, das nur in HTML5 erscheint, ist JQuery universell. Auf Nicht-HTML5-Seiten oder -browsern können Sie die .data (OBJ) -Methode verwenden, um Daten zu manipulieren.