Jeste li znali da postoji izvorno HTML5 rješenje za vrlo jednostavnu izradu harmonike za čitanje više/manje gumba za skrivanje i otkrivanje sadržaja s BEZ JavaScripta ili CSS-a. Čitajte dalje da biste saznali kako.
Korištenje električnih romobila ističe i HTML5 oznake službeno su a element widgeta za otkrivanje, Ali uparen sa HTML5 oznake će vam dati čista harmonika samo za HTML.
Značenje nema JS ILI CSS potrebno je. Kako je to cool!
Evo primjera koji prikazuje jednostavan element s a i .
Evo koda:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>a evo kako će to izgledati:
opširnije
Ovo je izvorna HTML5 harmonika za skrivanje i otkrivanje sadržaja. Prilično cool, zar ne?
Kako radi? Korištenje električnih romobila ističe tag služi kao omotač za element koji se može otvoriti ili zatvoriti. Korisnik mora kliknuti na oznaku koja je oznaku za otvaranje ili zatvaranje elementa.
Što je sa stajlingom i ponašanjem?
Stilovi
Možete primijeniti CSS stil kako biste prilagodili izgled tekstualnog okvira za otkrivanje. Dolje daje stil sučelja s karticama:
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;
}Prema zadanim postavkama, kursor se pojavljuje kao strelica, ali ako želite da bude a pokazujući rukom umjesto toga upotrijebi ovo:
details {
cursor: pointer;
}ponašanja
Postavljanje ponašanja je vrlo ograničeno, zapravo postoji samo jedna stvar koju možete učiniti, a to je napraviti otkriveni tekst otvoreno prema zadanim postavkama.
Da biste pokrenuli harmoniku u otvorenom stanju, dodajte Booleovu vrijednost otvoriti atribut označiti:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>opširnije
Ovo je izvorna HTML5 harmonika za skrivanje i otkrivanje sadržaja. Prilično cool, zar ne?
Koje atribute mogu koristiti?
Atributi u nastavku mogu se koristiti za označiti:
| Atribut | Još malo brojeva | rezime |
|---|---|---|
| otvoriti | otvoriti | Zadana vrijednost je nije otvoreno. |
| id | vrijednost | Pruža jedinstveni identifikator. |
| razred | nazivi klasa | Dodjeljuje nazive klasa elementu. |
| stil | CSS-vrijednosti | Dodjeljuje CSS stilove elementu. |
Dakle, koja su ograničenja? Uvijek postoji neka kvaka, zar ne?
Nema podrške za Internet Explorer
Ova harmonika samo za HTML5 neće raditi ni u jednoj verziji Internet Explorera. Ako morate imati podršku za IE11, morat ćete koristiti drugo zamjensko rješenje koristeći JQuery. Svi ostali preglednici podržavaju i .
Nema prilagođenih animacija ili prijelaza
Iako možete mijenjati i stilizirati izgled (kao što je gore prikazano), nećete moći raditi animacije ili prijelaze za otkrivanje teksta. Ako to želite učiniti, trebat će vam drugo CSS/JSS harmonika rješenje.
Čitači zaslona i pristupačnost
Ovo je izvorno HTML5 i *trebao bi biti* dostupan, ali otkriveno je da čitač zaslona ne najavljuje uvijek ispravno stvarni otkriveni tekst.
Reference:
