HTML5 Slik bruker du og Merker
Blant flere nye koder som er tilgjengelige i HTML5, Spesifikasjoner (for eksempel: figur, figcaption, og side), detalj og sammendrag Etiketter, etter min mening, er de mest nyttige. Med disse nye kodene kan du gjemme noe av det lange innholdet og vise kun sammendraget.
Vi ser faktisk denne effekten rundt, men de fleste er fortsatt bygget på JavaScript eller dets bror: jQuery, som de fleste ikke forstår. Nå, med disse nye elementene - detaljer og sammendrag - ting blir enklere.
Så, la oss se hvordan tags fungerer i et ekte tilfelle scenario.
I denne demonstrasjonen skal vi oppsummere en produktbeskrivelse. Først la oss lage en "detaljer" -tag og deretter legge alt innhold sammen med «sammendrag» -taggen inne i det, som i eksemplet nedenfor:
MacBook Pro-spesifikasjon
- 13,3-tommers LED-bakgrunnsbelyst, glanset widescreen-skjerm med kant til kant, uavbrutt glass (1280 x 800 pixel oppløsning).
- 2,4 GHz Intel Core i5 dual-core prosessor med 3 MB delt L3-buffer for utmerket multitasking.
- Intel HD Graphics 3000 med 384 MB DDR3 SDRAM delt med hovedminne.
- 500 GB Serial ATA-harddisk (5400 RPM)
- 4 GB installert RAM (1333 MHz DDR3, støtter opptil 8 GB)
I det eksemplet har jeg lagt til detaljert detaljering av MacBook Pro, og nå ser vi hvordan nettleseren gjør disse kodene.
Jeg har også lagt til en tittel og flere beskrivelser av produktet over detaljene for å gjøre demo mer fornuftig for deg. Så hva tror du? Det er ganske enkelt, rett?
Nettleser støtter
Men før du haster for å bruke denne taggen på hele nettstedet ditt, bør det bemerkes at detaljene og sammendragskoden bare støttes for øyeblikket bare på Chrome 12 og over.
Selv den nyeste Firefox støtter dem ikke ennå.
Så, hvis du vil bruke denne taggen, må du inkludere en tilbakekallingsfunksjon for ikke-støttede nettlesere. Den gode nyheten det, det er enkelt; Du kan bruke denne informasjonen polyfil, som automatisk vil kopiere taggfunksjonaliteten til gamle nettlesere.
Last ned denne filen og koble den til html-dokumentet sammen med jQuery (1.7+ på minimum) og sørg for at du plasserer polyfillet før den nære kroppen taggen.
Og inn i hodetiketten, sett inn følgende betinget kode for å inkludere HTML5shiv for IE8 og tidligere, ellers vil ikke Internet Explorer gjenkjenne disse nye kodene.
La oss se hvordan det viser seg i Internet Explorer:
Og det fungerer nå også på Internet Explorer.
- Demo
- Last ned kilde
Konklusjon
Å lage en slik skjult-og-vise-effekt med JavaScript eller jQuery er faktisk relativt enkelt, men å ha det støttet internt fra nettleseren, er definitivt en mye enklere løsning for mange mennesker. Enten du vil gjøre det i JavaScript eller i HTML5, er det din beslutning. Takk for at du leser, og jeg håper du likte det.
