A e dini se ekziston një zgjidhje vendase HTML5 për të krijuar me lehtësi një buton fizarmonikë lexo më shumë/më pak për të fshehur dhe zbuluar përmbajtjen me JO JavaScript ose CSS. Lexoni për të zbuluar se si.
La Etiketat HTML5 janë zyrtarisht një elementi i miniaplikacionit të zbulimit, Por çiftëzohet me Etiketat HTML5 do t'ju japin një fizarmonikë e pastër vetëm në HTML.
Kuptim nuk ka JS OSE CSS eshte e nevojshme. Sa e lezetshme është kjo!
Këtu është një shembull që tregon një element të thjeshtë me a .
Këtu është kodi:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>dhe ja si do të duket:
Lexo më shumë
Kjo është një fizarmonikë amtare HTML5 për të fshehur dhe zbuluar përmbajtjen. Shumë bukur, apo jo?
Si funksionon kjo gjë? La etiketa shërben si një mbështjellës për një element që mund të hapet ose mbyllet. Përdoruesi duhet të klikojë në etiketën që është tag për të hapur ose mbyllur elementin.
Po stili dhe sjellja?
Styles
Mund të aplikoni stilimin CSS për të personalizuar pamjen e kutisë së tekstit të zbulimit. Më poshtë jep një stil ndërfaqeje me skeda:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Si parazgjedhje, kursori shfaqet si një shigjetë, por nëse dëshironi të jetë një duke treguar dorën në vend të kësaj, përdorni këtë:
details {
cursor: pointer;
}sjelljet
Vendosja e sjelljeve është shumë e kufizuar, në të vërtetë ekziston vetëm një gjë që mund të bësh dhe ajo është të bësh tekstin e zbuluar hapur si parazgjedhje.
Për të nisur fizarmonikën në gjendje të hapur, shtoni Boolean hapur atribut të etiketë:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Lexo më shumë
Kjo është një fizarmonikë amtare HTML5 për të fshehur dhe zbuluar përmbajtjen. Shumë bukur, apo jo?
Çfarë atributesh mund të përdor?
Atributet e mëposhtme mund të përdoren për etiketë:
| atribut | vlerë | përmbledhje |
|---|---|---|
| hapur | hapur | Default është jo e hapur. |
| id | vlerë | Ofron një identifikues unik. |
| klasë | emrat e klasave | Cakton emrat e klasave për elementin. |
| stil | CSS-vlerat | Cakton stile CSS për elementin. |
Pra, cilat janë kufizimet? Gjithmonë ka një kapje, apo jo?
Nuk ka mbështetje për Internet Explorer
Kjo fizarmonikë vetëm me HTML5 nuk do të funksionojë në asnjë version të Internet Explorer. Nëse duhet ta keni atë të mbështesë IE11, do t'ju duhet të përdorni një zgjidhje tjetër alternative duke përdorur JQuery. Të gjithë shfletuesit e tjerë mbështesin .
Nuk ka animacione ose tranzicione të personalizuara
Ndërsa ju mund të modifikoni dhe stiloni pamjen (siç tregohet më lart), nuk do të jeni në gjendje të bëni animacione ose tranzicione që zbulojnë tekst. Nëse dëshironi ta bëni këtë, do t'ju duhet një zgjidhje tjetër fizarmonike CSS/JSS.
Lexuesit e ekranit dhe aksesueshmëria
Kjo është vendase HTML5 dhe *duhet të jetë* i aksesueshëm, por është gjetur se teksti aktual i zbuluar nuk shpallet gjithmonë saktë nga një lexues i ekranit.
Referencat:
