Share
En av mine favoritt nye HTML5-koder, som bare nylig er integrert i Chrome (fra versjon 12), er detaljer element. Jeg vil vise deg å bruke den i dagens raske tips.
Accentsconagua
detaljer Tag gjør?Det gir oss i hovedsak mulighet til å vise og skjule innholdet med et enkelt klikk. Du er sikkert kjent med denne typen effekt, men frem til nå har det alltid blitt oppnådd med JavaScript. Tenk deg en overskrift med en pil ved siden av den, og når du klikker på den, vises ytterligere opplysninger nedenfor. Når du klikker på pilen igjen, skjules innholdet. Denne typen funksjonalitet er svært vanlig i FAQ-sider.
Her er et to minutters eksempel på denne typen effekt. (Type
Kontroll + Enterå behandle JavaScript.)
De detaljer elementet tillater oss å utelate JavaScript helt. Eller, bedre satt, vil det til slutt. Nettleserstøtten er fortsatt litt sparsom.
Så la oss dykke inn og lære å bruke denne nye taggen. Vi begynner med å lage en ny detaljer element.
Deretter må vi gi den en tittel, eller sammendrag av innholdet i.
Hvem går til College?
Som standard, i nettlesere som forstår detaljer element, alt i det - annet enn sammendrag tag - vil bli skjult. La oss legge til et avsnitt etter sammendrag.
Hvem går til College?
Din mor.
Gå videre og prøv demoen ut i Chrome 12 eller høyere (fra 17. november 2011).
Ok, la oss gjøre noe litt mer praktisk. Jeg vil vise forskjellige Nettuts + artikler ved hjelp av detaljer element. Vi lager først oppslaget for en enkelt artikkel.
Dig i Dojo
Grav inn i Dojo: DOM Basics
Kanskje du så det tweet: "jQuery er et gateway-stoff. Det fører til fullstendig JavaScript-bruk. "En del av den avhengigheten, bekrefter jeg, er å lære andre JavaScript-rammer. Og det er hva denne firedelte serien på den utrolige Dojo Toolkit handler om: tar deg til neste nivå av JavaScript-avhengigheten din.
Deretter gir vi det bare et snev av styling.
kropp font-family: sans-serif; detaljer overflow: hidden; bakgrunn: # e3e3e3; margin-bunn: 10px; skjerm: blokk; detaljer oppsummering markør: pointer; polstring: 10px; detaljer div float: left; bredde: 65%; detaljer div h3 margin-top: 0; detaljer img float: left; bredde: 200px; polstring: 0 30px 10px 10px;
Vær oppmerksom på at jeg viser deg åpen Oppgi for å gjøre det lettere, men når siden laster, ser du bare sammendrag tekst.
Hvis du foretrekker å være i denne tilstanden som standard, legger du til
åpenattributt tildetaljerelement:
Det er ikke helt like rett frem for å stil pilen selv som vi kanskje håper. Likevel er det mulig; nøkkelen er å bruke -WebKit-detaljer-markør pseudoklasse.
detaljer sammendrag :: - webkit-detaljer-markør farge: grønn; skriftstørrelse: 20px;
Skulle du måtte bruke et egendefinert ikon, er det muligens den enkleste løsningen å skjule pilen (ved hjelp av pseudoklassen over), og deretter enten bruke et bakgrunnsbilde til sammendrag element, eller bruk :etter eller :før pseudo elementer.
Se det endelige prosjektet.
Det er sikkert en enkel effekt, men det er sikkert fint å ha en så vanlig funksjon innebygd. Til vi kan pålidelig bruke detaljer element på tvers av alle nettlesere, kan du bruke denne polyprofilen til å gi tilbakebetaling. En siste notat: På tidspunktet for denne skrivingen synes det ikke å være en måte å skifte innholdet med et tastatur på. Dette kan potensielt presentere noen tilgjengelighetsproblemer.
