HTML5 Kuidas kasutada

ja

sildid

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

Mitmete HTML5-s saadaval olevate uute siltide hulgas on spetsifikatsioonid (nt: joonis, joonistamine, ja kõrvale), üksikasjalikult ja kokkuvõte minu arvates on märgised kõige kasulikumad. Nende uute siltide abil saate peita mõne pika sisu ja kuvada ainult kokkuvõtte.

Me näeme seda efekti tihti sageli, kuid enamik neist on ikka veel JavaScript või tema vend: jQuery, mida enamik inimesi ei mõista. Nüüd, nende uute elementidega - üksikasjad ja kokkuvõte - asjad lihtsustuvad.

Niisiis, vaatame, kuidas sildid reaalses stsenaariumis toimivad.

Selles demos me võtame kokku toote kirjelduse. Kõigepealt looge "detailide" silt ja seejärel asetage kogu sisu koos selle kokkuvõtte märgendiga, nagu allpool toodud näites:

 
 
MacBook Pro spetsifikatsioon
 
 
13,3-tolline LED-taustavalgustusega läikiv laiekraan servast servani katkematu klaasiga (1280 x 800 pikslit).
 
2,4 GHz Intel Core i5 kahetuumaline protsessor 3 MB jagatud L3 vahemäluga suurepärase multitegumi jaoks.
 
Intel HD Graphics 3000 koos 384 MB DDR3 SDRAMiga, mis on jagatud põhimäluga.
 
500 GB Serial ATA kõvaketas (5400 p / min)
 
4 GB paigaldatud RAM (1333 MHz DDR3; toetab kuni 8 GB)
 
 
 

Selles näites olen lisanud MacBook Pro spetsifikatsiooni üksikasjad ja vaatame nüüd, kuidas brauser need sildid teeb.

Olen lisanud ka toote pealkirja ja rohkem kirjeldusi, et ülaltoodud demo oleks teile mõistlikum. Nii et mida sa arvad? See on üsna lihtne, eks?

Brauseri tugi

Kuid enne selle sildi rakendamist kogu oma veebisaidile tuleb märkida, et üksikasjad ja kokkuvõtlik silt on praegu toetatud ainult Chrome'is 12 ja uuemates versioonides.

Isegi viimane Firefox ei toeta neid veel.

Seega, kui soovite seda silti rakendada, peate toetamata brauseritele lisama varufunktsiooni. Hea uudis, see on lihtne; seda teavet saab kasutada polüfill, mis kopeerib automaatselt vanade brauserite sildifunktsiooni.

Laadige see fail alla ja ühendage see html-dokumendiga koos jQueryga (vähemalt 1,7+) ja veenduge, et asetate polüfill enne suletud keha sildi.

Ja peaotsiku sees sisestage järgmine tingimuslik silt HTML5shivi lisamiseks IE8-le ja varem, vastasel juhul Internet Explorer ei tunnista neid uusi silte.

Nüüd vaatame, kuidas Internet Exploreris selgub:

Ja nüüd töötab see ka Internet Exploreris.

• Demo
• Allalaadimise allikas

Järeldus

Sellise peidetud ja näitava efekti loomine JavaScripti või jQueryga on tegelikult suhteliselt lihtne, kuid brauserilt selle toetamine on kindlasti palju lihtsam lahendus paljudele inimestele. Kas soovite seda teha JavaScriptis või HTML5-s, on see teie otsus. Täname lugemise eest ja ma loodan, et nautisite seda.