Share
Una dintre cele mai noi etichete HTML5 preferate, care a fost integrată recent în Chrome (din versiunea 12), este Detalii element. Îți arăt să o folosești în sfatul de astăzi.
Accentsconagua
Detalii Etichetă Nu?În esență, ne permite să afișăm și să ascundem conținutul prin apăsarea unui buton. Cu siguranță sunteți familiarizați cu acest tip de efect, dar, până acum, a fost întotdeauna realizat cu JavaScript. Imaginați-vă o rubrică cu o săgeată de lângă ea și când faceți clic pe ea, informațiile suplimentare de mai jos devin vizibile. Dând clic pe săgeată din nou, ascunde conținutul. Acest tip de funcționalitate este foarte frecvent în paginile de întrebări frecvente.
Iată un exemplu de două minute de acest fel de efect. (Tip
Controlați + Introducețipentru a procesa JavaScript.)
Detalii element ne permite să omitem în întregime JavaScript. Sau, mai bine pune, în cele din urmă va. Suportul pentru browser este în continuare un pic redus.
Deci, să ne aruncăm cu capul în jos și să învățăm cum să folosim această nouă etichetă. Începem prin a crea un nou Detalii element.
În continuare, trebuie să îi oferim un titlu sau rezumat a conținutului din.
Cine merge la Colegiu?
Implicit, în browsere care înțeleg Detalii element, totul în el - altul decât rezumat tag - va fi ascuns. Să adăugăm un paragraf după rezumat.
Cine merge la Colegiu?
Mama ta.
Continuați și încercați demo-ul în Chrome 12 sau mai mult (începând cu data de 17 noiembrie 2011).
Bine, să facem ceva mai practic. Vreau să afișez diverse articole Nettuts + folosind Detalii element. Mai întâi creăm marcajul pentru un singur articol.
Să mergem în Dojo
Dig în Dojo: Bazele DOM
Poate că ați văzut acel tweet: "jQuery este un drog de gateway. Aceasta duce la utilizarea full-on a JavaScript. "O parte din această dependență, susțin, este învățarea altor cadre JavaScript. Și asta este totul despre această serie de patru părți despre incredibilul Dojo Toolkit: vă duce la nivelul următor al dependenței de JavaScript.
În continuare, îi vom da doar un aspect de stil.
corp font-family: sans-serif; detalii overflow: hidden; fundal: # e3e3e3; margin-bottom: 10px; afișare: bloc; rezumatul detaliilor cursor: pointer; padding: 10px; detalii div float: left; lățime: 65%; detalii div h3 margin-top: 0; detalii img float: left; lățime: 200px; umplutura: 0 30px 10px 10px;
Vă rugăm să rețineți că vă arăt deschis pentru confort, dar atunci când se încarcă pagina, veți vedea numai rezumat text.
Dacă preferați să fiți implicit în această stare, adăugați
deschisatribut laDetaliielement:
Nu este chiar atât de îndreptat să stilul săgeții în sine așa cum am putea să sperăm. Cu toate acestea, este posibil; cheia este de a utiliza -WebKit-detalii marker pseudo-clasă.
detalii sumar :: - webkit-details-marker culoare: verde; font-size: 20px;
Dacă aveți nevoie să utilizați o pictogramă personalizată, este posibil ca cea mai ușoară soluție să ascundeți săgeata (utilizând clasa pseudo de mai sus) și apoi să aplicați o imagine de fundal rezumat element sau utilizați :după sau :inainte de pseudo elemente.
Vedeți proiectul final.
Este cu siguranță un efect simplu, dar este bine să aveți o funcție comună încorporată. Până vom putea folosi în mod fiabil Detalii element din toate browserele, puteți utiliza acest polifil pentru a oferi suport alternativ. O notă finală: la momentul acestei scrieri, nu pare să existe o modalitate de a comuta conținutul cu o tastatură. Acest lucru ar putea prezenta unele probleme de accesibilitate.
