Share
Einer meiner beliebtesten neuen HTML5-Tags, der erst kürzlich in Chrome (ab Version 12) integriert wurde, ist der Einzelheiten Element. Ich zeige Ihnen, wie Sie es im heutigen schnellen Tipp verwenden können.
Accentsconagua
Einzelheiten Tag machen?Im Wesentlichen können wir Inhalte mit einem Klick anzeigen und ausblenden. Sie sind mit dieser Art von Effekt sicherlich vertraut, aber bisher war dies immer mit JavaScript möglich. Stellen Sie sich eine Überschrift mit einem Pfeil daneben vor, und wenn Sie darauf klicken, werden unten weitere Informationen angezeigt. Durch erneutes Klicken auf den Pfeil wird der Inhalt ausgeblendet. Diese Art von Funktionalität ist auf FAQ-Seiten sehr verbreitet.
Hier ist ein zweiminütiges Beispiel für diese Art von Effekt. (Art
Strg + Eingabetasteum das JavaScript zu verarbeiten.)
Das Einzelheiten Mit diesem Element können wir das JavaScript vollständig auslassen. Oder besser gesagt, es wird letztendlich. Die Browser-Unterstützung ist immer noch etwas spärlich.
Lassen Sie uns also eintauchen und lernen, wie Sie dieses neue Tag verwenden. Wir beginnen mit dem Erstellen eines neuen Einzelheiten Element.
Als nächstes müssen wir ihm einen Titel geben oder Zusammenfassung des Inhalts innerhalb.
Wer geht aufs College?
Standardmäßig in Browsern, die das verstehen Einzelheiten Element, alles in ihm - anders als das Zusammenfassung Tag - wird ausgeblendet. Fügen wir einen Absatz nach dem hinzu Zusammenfassung.
Wer geht aufs College?
Deine Mutter.
Probieren Sie die Demo in Chrome 12 oder höher aus (Stand 17. November 2011).
Okay, lass uns etwas praktischer machen. Ich möchte verschiedene Nettuts + Artikel mit dem anzeigen Einzelheiten Element. Zuerst erstellen wir das Markup für einen einzelnen Artikel.
In Dojo graben
In Dojo graben: DOM-Grundlagen
Vielleicht haben Sie diesen Tweet gesehen: „jQuery ist eine Gateway-Droge. Dies führt zu einer vollständigen Verwendung von JavaScript. “Ein Teil dieser Sucht, so behaupte ich, lernt andere JavaScript-Frameworks. Und genau darum geht es in dieser vierteiligen Serie des unglaublichen Dojo Toolkits: Sie bringen Sie zur nächsten Stufe Ihrer JavaScript-Sucht.
Als nächstes geben wir ihm nur einen Hauch von Stil.
body font-family: serifenlos; Details Überlauf: ausgeblendet; Hintergrund: # e3e3e3; Rand unten: 10px; Bildschirmsperre; Details Zusammenfassung Cursor: Zeiger; Polsterung: 10px; Details div float: left; Breite: 65%; Details div h3 margin-top: 0; Details img float: left; Breite: 200px; Polsterung: 0 30px 10px 10px;
Bitte beachten Sie, dass ich Ihnen das zeige öffnen Der Einfachheit halber wird jedoch der Status angezeigt. Wenn die Seite jedoch geladen wird, wird nur das Symbol angezeigt Zusammenfassung Text.
Wenn Sie es vorziehen, standardmäßig in diesem Status zu sein, fügen Sie das hinzu
öffnenAttribut zumEinzelheitenElement:
Es ist nicht ganz so einfach, den Pfeil selbst so zu gestalten, wie wir vielleicht hoffen. Trotzdem ist es möglich; Der Schlüssel ist die Verwendung der -webkit-details-marker Pseudoklasse.
Detailübersicht :: - Webkit-Detailmarker Farbe: grün; Schriftgröße: 20px;
Wenn Sie ein benutzerdefiniertes Symbol verwenden müssen, ist es möglicherweise die einfachste Lösung, den Pfeil auszublenden (mithilfe der Pseudoklasse oben) und dann ein Hintergrundbild auf das Symbol anzuwenden Zusammenfassung oder verwenden Sie die :nach dem oder :Vor Pseudoelemente.
Sehen Sie sich das endgültige Projekt an.
Es ist sicherlich ein einfacher Effekt, aber es ist sicher schön, eine solche gemeinsame Funktion eingebaut zu haben. Bis wir das zuverlässig nutzen können Einzelheiten Elementübergreifend für alle Browser können Sie dieses Polyfill verwenden, um Unterstützung für den Fallback bereitzustellen. Eine letzte Anmerkung: Zum Zeitpunkt dieses Schreibens scheint es keine Möglichkeit zu geben, den Inhalt mit einer Tastatur umzuschalten. Dies kann möglicherweise zu Problemen mit der Zugänglichkeit führen.
