Tudta-e, hogy létezik egy natív HTML5-megoldás, amellyel nagyon egyszerűen létrehozhat egy harmonika olvasás többet/kevesebb gombot a tartalom elrejtéséhez és felfedéséhez NINCS JavaScript vagy CSS. Olvassa el, hogy megtudja, hogyan.
A és a A HTML5 címkék hivatalosan a közzétételi widget elem, De a párosítva A HTML5 címkék a tiszta HTML-csak harmonika.
Jelentés nincs JS VAGY CSS szükség van rá. Milyen klassz!
Íme egy példa, amely egy egyszerű elemet mutat be a és a .
Itt van a kód:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>és így fog kinézni:
Olvasson többet
Ez egy natív HTML5 harmonika a tartalom elrejtésére és felfedésére. Nagyon klassz, igaz?
Hogyan működik? A címke egy nyitható vagy zárható elem burkolóanyagaként szolgál. A felhasználónak rá kell kattintania arra a címkére, amely a címkét az elem megnyitásához vagy bezárásához.
Mi a helyzet a stílussal és a viselkedéssel?
Stílusok
CSS-stílussal testreszabhatja a felfedő szövegmező megjelenését. Az alábbiak egy füles felület stílusát mutatják be:
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;
}Alapértelmezés szerint a kurzor nyílként jelenik meg, de ha azt szeretné, hogy a mutató kéz ehelyett használja ezt:
details {
cursor: pointer;
}Viselkedés
A viselkedések beállítása nagyon korlátozott, valójában csak egy dolgot tehetsz, és ez az, hogy elkészíted a feltárt szöveget alapértelmezés szerint nyitott.
A harmonika nyitott állapotában való indításához adja hozzá a logikai értéket nyitva attribútum a címke:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Olvasson többet
Ez egy natív HTML5 harmonika a tartalom elrejtésére és felfedésére. Nagyon klassz, igaz?
Milyen attribútumokat használhatok?
Az alábbi attribútumok használhatók a címke:
| Attribútum | Érték | Összegzésként |
|---|---|---|
| nyitva | nyitva | Alapértelmezett: nincs nyitva. |
| id | érték | Egyedi azonosítót biztosít. |
| osztály | osztálynevek | Osztályneveket rendel az elemhez. |
| stílus | CSS-értékek | CSS-stílusokat rendel az elemhez. |
Tehát mik a korlátok? Mindig van valami fogás, nem?
Nem támogatja az Internet Explorert
Ez a csak HTML5-öt használó harmonika nem működik az Internet Explorer egyetlen verziójában sem. Ha támogatnia kell az IE11-et, egy másik tartalék megoldást kell használnia a JQuery használatával. Minden más böngésző támogatja és a .
Nincsenek testreszabott animációk vagy átmenetek
Módosíthatja és stílusosan módosíthatja a megjelenést (a fent látható módon), de nem tud semmilyen szöveges animációt vagy átmenetet megjeleníteni. Ha ezt szeretné megtenni, szüksége lesz egy másik CSS/JSS harmonika megoldásra.
Képernyőolvasók és kisegítő lehetőségek
Ez natív HTML5 és *kell elérhető*, de kiderült, hogy a tényleges felfedett szöveget a képernyőolvasó nem mindig jelenti be megfelelően.
Referenciák:
