Share
En av mina favorit nya HTML5-taggar, som nyligen har integrerats i Chrome (från version 12), är detaljer element. Jag visar dig att använda den i dagens snabba tips.
Accentsconagua
detaljer Tag gör?Det låter oss i princip visa och gömma innehållet med ett knapptryck. Du är säkert bekant med denna typ av effekt, men hittills har det alltid uppnåtts med JavaScript. Föreställ dig en rubrik med en pil bredvid den, och när du klickar på den visas ytterligare information nedan. Genom att klicka på pilen igen döljer innehållet. Denna typ av funktionalitet är mycket vanligt i FAQ-sidor.
Här är ett två minuters exempel på denna typ av effekt. (Typ
Kontroll + Enterför att bearbeta JavaScript.)
De detaljer elementet tillåter oss att helt och hållet lämna JavaScript. Eller, bättre sätta, så kommer det så småningom. Webbläsarstöd är fortfarande lite gles.
Så låt oss dyka in och lära oss hur du använder den här nya taggen. Vi börjar med att skapa en ny detaljer element.
Därefter måste vi ge det en titel, eller sammanfattning av innehållet inom.
Vem går till college?
Som standard, i webbläsare som förstår detaljer element, allt inom det - annat än sammanfattning tagg - kommer att döljas. Låt oss lägga till en paragraf efter sammanfattning.
Vem går till college?
Din mamma.
Fortsätt och prova demoen i Chrome 12 eller senare (den 17 november 2011).
Okej, låt oss göra något lite mer praktiskt. Jag vill visa olika Nettuts + artiklar med hjälp av detaljer element. Vi skapar först markeringen för en enda artikel.
Gräva i Dojo
Gräva i Dojo: DOM Basics
Kanske såg du det tweet: "jQuery är en gateway drug. Det leder till fullständig JavaScript-användning. "En del av den missbruk som jag hävdar är att lära andra JavaScript-ramar. Och det är vad den här fyrdelartserien på den fantastiska Dojo Toolkit handlar om: tar dig till nästa nivå av din JavaScript-beroende.
Därefter ger vi det bara en touch av styling.
kropp font-family: sans-serif; detaljer översvämning: gömd; bakgrund: # e3e3e3; marginal-botten: 10px; display: block; detaljer sammanfattning markör: pekare; vaddering: 10px; detaljer div float: left; bredd: 65%; detaljer div h3 margin-top: 0; detaljer img float: left; bredd: 200px; vaddering: 0 30px 10px 10px;
Observera att jag visar dig öppna Ange för enkelhets skyld, men när sidan laddas ser du bara sammanfattning text.
Om du föredrar att vara i detta tillstånd som standard lägger du till
öppnaattribut tilldetaljerelement:
Det är inte riktigt lika rakt fram att vi själva stryker pilen som vi hoppas. Det är emellertid möjligt; nyckeln är att använda -WebKit-detaljer-markör pseudoklass.
detaljerad sammanfattning :: - webkit-detaljer-markör färg: grön; fontstorlek: 20px;
Skulle du behöva använda en anpassad ikon kanske den enklaste lösningen är att dölja pilen (med hjälp av pseudoklassen ovan) och sedan applicera en bakgrundsbild till sammanfattning element, eller använd :efter eller :innan pseudoelement.
Se det slutliga projektet.
Det är verkligen en enkel effekt, men det är säkert trevligt att ha en sådan gemensam funktion inbyggd. Fram till vi kan på ett tillförlitligt sätt använda detaljer elementet över alla webbläsare, kan du använda den här polyfilen för att tillhandahålla återgångsstöd. En sista anmärkning: På det här skrivetiden verkar det inte vara ett sätt att byta innehållet med ett tangentbord. Detta kan eventuellt presentera vissa tillgänglighetsproblem.
