Ali ste vedeli, da obstaja izvorna rešitev HTML5 za zelo preprosto ustvarjanje harmonike gumba za branje več/manj za skrivanje in razkrivanje vsebine z BREZ JavaScripta ali CSS. Preberite, če želite izvedeti, kako.
O in Oznake HTML5 so uradno a element pripomočka za razkritje, Vendar seznanjeni z Oznake HTML5 vam bodo dale čista harmonika samo za HTML.
Pomen brez JS ALI CSS je potrebno. Kako kul je to!
Tukaj je primer, ki prikazuje preprost element z a in .
Tu je koda:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>in takole bo videti:
Preberi več
To je izvorna harmonika HTML5 za skrivanje in razkrivanje vsebine. Precej kul, kajne?
Kako deluje? O Tag služi kot ovoj za element, ki ga je mogoče odpreti ali zapreti. Uporabnik mora klikniti oznako, ki je oznako za odpiranje ali zapiranje elementa.
Kaj pa stajling in obnašanje?
Slogi
Uporabite lahko slog CSS, da prilagodite videz razkritega besedilnega polja. Spodaj je prikazan slog vmesnika z zavihki:
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;
}Kazalec je privzeto prikazan kot puščica, če pa želite, da je a kazalna roka namesto tega uporabite to:
details {
cursor: pointer;
}Ponašanje
Nastavitev vedenja je zelo omejena, v resnici lahko naredite samo eno stvar in to je, da ustvarite razkrito besedilo privzeto odprto.
Če želite zagnati harmoniko v odprtem stanju, dodajte logično vrednost odprite pripisati oznaka:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Preberi več
To je izvorna harmonika HTML5 za skrivanje in razkrivanje vsebine. Precej kul, kajne?
Katere atribute lahko uporabim?
Spodnje atribute lahko uporabite za oznaka:
| Lastnost | vrednost | Povzetek |
|---|---|---|
| odprite | odprite | Privzeto je ni odprta. |
| id | vrednost | Zagotavlja edinstven identifikator. |
| razred | imena razredov | Elementu dodeli imena razredov. |
| slog | CSS-vrednosti | Elementu dodeli sloge CSS. |
Kakšne so torej omejitve? Vedno je kakšna zanka, kajne?
Ni podpore za Internet Explorer
Ta harmonika samo za HTML5 ne bo delovala v nobeni različici Internet Explorerja. Če mora podpirati IE11, boste morali uporabiti drugo nadomestno rešitev z uporabo JQuery. Vsi ostali brskalniki podpirajo in .
Brez prilagojenih animacij ali prehodov
Čeprav lahko spreminjate in oblikujete videz (kot je prikazano zgoraj), ne boste mogli narediti nobenih animacij ali prehodov za razkrivanje besedila. Če želite to storiti, boste potrebovali drugo rešitev harmonike CSS/JSS.
Bralniki zaslona in dostopnost
To je domače HTML5 in *moralo bi biti* dostopno, vendar je bilo ugotovljeno, da dejanskega razkritega besedila bralnik zaslona ne napove vedno pravilno.
Reference:
