Interaktív elemek

A <details> és a <summary> tagek

A <details> és a <summary> tagek további részletes leírás megjelenítésére szolgálnak. A summary tag tartalma úgy viselkedik, mintha egy link volna. Rákattintás után a <details> tag többi tartalma láthatóvá válik a felhasználó számára, illetve újrakattintás után eltűnik.

A <details> tag paraméterei:

• globális attribútumok
• open: logikai attribútum. Ha szerepeltetjük, akkor a részletes leírás alaphelyzetben kinyitott állapotban lesz, vagyis látszik a képernyőn.

A <summary> tag paraméterei: globális attribútumok

<details>
    <summary>További információ megjelenítése</summary>
    <p>Megjelenített részletes adatok vagy további információ...</p>
</details>

A <details> tagbe kerül a részletes információ, amely alapból nem látható a felhasználó számára. A <details> tag gyereke egy summary tag, amelynek a tartalma látható. A <summary> tartalmára való kattintás után a felhasználó számára is elérhetővé válik a részletes tartalom.

Az is megadható, hogy a részletek alapértelmezett esetben ne legyenek elrejtve.

<details open="open">
    <summary>További információ megjelenítése</summary>
    <p>Megjelenített részletes adatok vagy további információ...</p>
</details>

Például egy másolás vagy letöltés esetén is hasznos lehet a tag-ek használata, amikor a <summary> tag tartalmazza, hogy hány százalék van készen a letöltésből a details tag pedig a letöltés részletes adatait tartalmazza.

Vissza a tartalomjegyzékhez

További elemek

Egyelőre a szabványban szereplő többi elem böngészőtámogatottsága nagyon rossz, így a tananyagunkat akkor fogjuk bővíteni ezen lehetőségekkel, ha azok már megfelelően tesztelhetővé válnak.

Vissza a tartalomjegyzékhez