Share
Een van mijn favoriete nieuwe HTML5-tags, die pas sinds kort in Chrome is geïntegreerd (vanaf versie 12), is de gegevens element. Ik zal je laten zien om het te gebruiken in de snelle tip van vandaag.
Accentsconagua
gegevens Tag Do?Het stelt ons in wezen in staat om inhoud weer te geven en te verbergen met een klik op de knop. U bent zeker bekend met dit type effect, maar tot nu toe was dit altijd met JavaScript bereikt. Stel je een kop voor met een pijl ernaast, en als je erop klikt, wordt aanvullende informatie hieronder zichtbaar. Opnieuw klikken op de pijl verbergt de inhoud. Dit soort functionaliteit is heel gebruikelijk op de pagina's met veelgestelde vragen.
Hier is een voorbeeld van twee minuten van dit soort effect. (Type
Controle + Enterom het JavaScript te verwerken.)
De gegevens element stelt ons in staat om de JavaScript volledig weg te laten. Of, beter gezegd, het zal uiteindelijk wel gebeuren. Browserondersteuning is nog steeds een beetje schaars.
Dus laten we duiken en leren hoe deze nieuwe tag te gebruiken. We beginnen met het maken van een nieuwe gegevens element.
Vervolgens moeten we het een titel geven, of samenvatting van de inhoud binnenin.
Wie gaat naar de universiteit?
Standaard in browsers die de gegevens element, alles erin - anders dan het samenvatting tag - zal worden verborgen. Laten we een alinea toevoegen na de samenvatting.
Wie gaat naar de universiteit?
Jouw moeder.
Ga je gang en probeer de demo uit in Chrome 12 of hoger (vanaf 17 november 2011).
Oké, laten we iets praktischer doen. Ik wil verschillende Nettuts + artikelen weergeven met behulp van de gegevens element. We maken eerst de markup voor één artikel.
Graaf in Dojo
Graaf in Dojo: DOM Basics
Misschien zag je die tweet: "jQuery is een gateway-medicijn. Het leidt tot volledig JavaScript-gebruik. "Een deel van die verslaving is volgens mij het leren van andere JavaScript-frameworks. En dat is precies wat deze vierdelige serie over de ongelooflijke Dojo Toolkit inhoudt: je meenemen naar het volgende niveau van je JavaScript-verslaving.
Vervolgens geven we het een beetje styling.
body font-family: sans-serif; details overloop: verborgen; achtergrond: # e3e3e3; margin-bottom: 10px; weergave: blok; details samenvatting cursor: pointer; opvulling: 10px; details div float: left; breedte: 65%; details div h3 margin-top: 0; details img float: left; breedte: 200 px; opvulling: 0 30px 10px 10px;
Houd er rekening mee dat ik u de Open state voor het gemak, maar wanneer de pagina wordt geladen, ziet u alleen de samenvatting tekst.
Als u er de voorkeur aan geeft om standaard in deze staat te verkeren, voegt u de
Opentoeschrijven aan degegevenselement:
Het is niet zo eenvoudig om de pijl zelf vorm te geven als we hopen. Niettemin is het mogelijk; de sleutel is om de -webkit-gegevens-marker pseudoklasse.
details samenvatting :: - webkit-details-marker kleur: groen; lettertypegrootte: 20px;
Als u een aangepast pictogram moet gebruiken, is de meest eenvoudige oplossing het verbergen van de pijl (met de pseudo-klasse hierboven) en vervolgens een achtergrondafbeelding op de afbeelding toe te passen. samenvatting element, of gebruik de :na of :voor pseudo elementen.
Bekijk het laatste project.
Het is zeker een eenvoudig effect, maar het is zeker leuk om zo'n gemeenschappelijke functie ingebouwd te hebben. Totdat we het. Betrouwbaar kunnen gebruiken gegevens element in alle browsers, kunt u deze polyfill gebruiken om fallback-ondersteuning te bieden. Een laatste opmerking: op het moment van dit schrijven lijkt er geen manier te zijn om de inhoud met een toetsenbord te wisselen. Dit kan mogelijk enkele toegankelijkheidsproblemen opleveren.
