15. diel - Bootstrap - Collapse a Accordion
V predchádzajúcom cvičení, Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V minulej lekcii, Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku , sme si predstavili prezentačné komponent carousel a progressbar. V dnešnom tutoriále CSS frameworku Bootstrap sa budeme zaoberať sbalovacími / rozbaľovacími komponentmi Collapse a jeho variantom Accordion.
Collapse
Aby sme docielili kvalitného používateľského zážitku, mali by sme zobrazovať iba relevantné informácie a snažiť sa o čo najmenšie množstvo viditeľného obsahu, ktorý používateľa nemusí v danú chvíľu zaujímať. Na tento účel sa často používajú záložky, ktoré sme si už ukazovali v lekcii o List groups. Bootstrap pre tieto účely poskytuje ešte univerzálnejší komponent, tzv. Collapse (možný český preklad je "zrútenie", budem sa však radšej držať pôvodného označenia).
Ukážka
Typicky Collapse použijeme na zobrazenie nejaké informácie, ktorá vo väčšine prípadov zaberá na stránke miesto, ale niektorým užívateľom chceme predsa len ponechať možnosť ju zobraziť. Zobrazení tejto informácie môžeme napojiť napr. Na tlačidlo alebo odkaz. Často sa táto funkčnosť používa aj na tzv. Spojlery, kde skrytie obsahu rieši problém vyzradenie odpovede na hádanku, riešenie príkladu alebo sa jedná napr. O časť recenzie knihy, ktorá prezrádza zápletku.
Keďže napojenie Collapse na tlačidlo a na odkaz vyzerá v kóde inak, ukážme si obe možnosti. Kód nižšie nechá užívateľa zobraziť detailný popis platby za poštovné.
<p>Za poštovné si účtujeme 99 Kč.</p> <p> <a class="btn btn-primary" data-toggle="collapse" href="#ukazka-collapse" aria-expanded="false" aria-controls="ukazka-collapse"> Více informací </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ukazka-collapse" aria-expanded="false" aria-controls="ukazka-collapse"> Více informací </button> </p> <div class="collapse" id="ukazka-collapse"> <div class="card card-body"> Poštovné zahrnuje dopravu Českou poštou, balné a službu upozornění naší operátorky na déle nevyzvednutou zásilku. </div> </div>
Nezabudnite si do stránku nalinkovať Bootstrap JavaScript. Výsledok v prehliadači:
Ako je u javascriptových Bootstrap komponentov zvykom, aj tu priraďujeme
elementu sa triedou .collapse
jedinečné id
. To
následne používame v selektora u tlačidiel, aby mohla element skryť alebo
zobraziť. Tlačidlám / odkazom priraďujeme dáta atribút
data-toggle
s hodnotou collapse
. Selektor uvádzame v
závislosti na použitom elementu buď do atribútu href
alebo do
dátumu atribútu data-target
. Selektor môže byť aj na triedu a
tak môže odkrývať / skrývať viac elementov než len jeden. CSS framework
Bootstrap odporúča pridávať ďalšie atribúty pre hlasové čítačky. Pre
zobrazenie ďalších informácií je tu použitá Bootstrap karta, ale samozrejme sa
tu môže nachádzať úplne ľubovoľný HTML obsah.
Triedy
JavaScript elementu automaticky priraďuje nasledujúce triedy:
.collapse
- Obsah je skrytý.collapsing
- Obsah sa skrýva alebo odkrýva (pri animácii).collapse.show
- Obsah je zobrazený
Accordion
Komponent Collapse priamo zvádza k implementácii "efektu harmoniky". Ten využijeme pri zložitých dokumentov, kde nás typicky zaujíma len časť obsahu a zobrazenie celého dokumentu by bolo veľmi neprehľadné. Otvorenie jednej časti harmoniky má za následok zatvorenie časti inej. Časté užitie je napr. Zobrazenie zmluvných podmienok alebo zákonov. K tomu využijeme niekoľkých kariet, na ktorých hlavičky napojíme Collapse, ktoré tvoria telá týchto kariet.
<h1>Živnostenský zákon</h1> <div id="harmonika" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="hlavicka-1"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1"> Část první - Všeobecná ustanovení </a> </h5> </div> <div id="collapse-1" class="collapse show" role="tabpanel" aria-labelledby="hlavicka-1" data-parent="#harmonika"> <div class="card-body"> Tento zákon upravuje podmínky živnostenského podnikání (dále jen "živnost") a kontrolu nad jejich dodržováním. Živností je soustavná činnost provozovaná samostatně, vlastním jménem, na vlastní odpovědnost, za účelem dosažení zisku a za podmínek stanovených tímto zákonem. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="hlavicka-2"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapseTwo"> Část druhá - Druhy živností </a> </h5> </div> <div id="collapse-2" class="collapse" role="tabpanel" aria-labelledby="hlavicka-2" data-parent="#harmonika"> <div class="card-body"> Ohlašovacími živnostmi jsou <ul> <li>živnosti řemeslné, je-li podmínkou provozování živnosti odborná způsobilost uvedená v § 21 a 22, <li>živnosti vázané, je-li podmínkou provozování živnosti odborná způsobilost uvedená v příloze č. 2 k tomuto zákonu, není-li dále stanoveno jinak, <li>živnost volná, u které není jako podmínka provozování živnosti odborná způsobilost stanovena. </ul> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="hlavicka-3"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3"> Část třetí - Rozsah živnostenského oprávnění </a> </h5> </div> <div id="collapse-3" class="collapse" role="tabpanel" aria-labelledby="hlavicka-3" data-parent="#harmonika"> <div class="card-body"> Rozsah živnostenského oprávnění (dále jen „rozsah oprávnění“) se posuzuje podle předmětu podnikání uvedeného ve výpisu s přihlédnutím k ustanovením této části. Živnostenské oprávnění k výkonu živnosti volné opravňuje k výkonu činností uvedených v příloze č. 4 k tomuto zákonu. </div> </div> </div> </div>
výsledok:
Kód asi nie je nutné príliš popisovať, keďže ide o karty, ktoré sme
si v kurze už podrobne vysvetlili. Hlavičky kariet sme napojili pomocou
unikátnych id
sa selektory na ich tela. Vďaka dáta atribútom a
triedam .collapse
je vždy rozbalené len telo jednej karty.
Bootstrap nám dokonca umožňuje poskladať si harmoniku aj z úplne
vlastných komponentov, nemusí sa jednať o karty. Je k tomu treba priradiť
dáta atribút data-children
divu s harmonikou. Do atribútu
umiestnime selektor na položky harmoniky. Môže tu byť teda napr. Hodnota
.polozka
(is bodkou). Dôjde k ďalšej drobnej zmene štruktúry,
pozrite sa na nasledujúcu ukážku a prípadne aj na jej zdrojový kód:
Pre podporu hlasových čítačiek si overte správne priradenie "aria" atribútov, aby čítačka dokázala čítať len rozbalené elementy a ponúkať podporu rozbaľovaní tých zabalených.
Collapse môžeme použiť pre ľubovoľné elementy, stačí ich správne napojiť, viď prvý príklad.
Javascript
Ak by ste na Collapse potrebovali nejakým spôsobom reagovať z JavaScriptu, jedná sa opäť o jQuery plugin s metódami a udalosťami.
Manuálne inicializáciu na miesto inicializácia pomocou dáta atribútov vykonáme takto:
$('.collapse').collapse();
Vlastnosti
Pre nastavenie rodičov a tlačidlá sme používali dáta atribúty
data-parent
a data-toggle
. V JavaScriptu môžeme
použiť rovnomenných vlastností bez prefixu data-
, teda
vlastností:
parent
- Ak je nastavený rodičovský element, dôjde k uzavretiu všetkých ostatných elementov po otvorení niektorého z nich. Atribút nastavujeme položkám, ktoré sa majú rozbaľovať / zbaľovať. Predvolená hodnota jefalse
, rodičia môžeme nastaviť pomocou selektora, jQuery objektu alebo DOM elementu.toggle
- Otvára / zatvára daný element. Predvolená hodnota jetrue
. Nastavujeme na ovládacie prvky.
Metódy
Metódy aj u tejto komponenty sa volajú asynchrónne a počas animácie sú ďalšie volania ignoruje. Riadenie je odovzdaný tesne po spustení animácie, ale pred jej dokončením.
Collapsible elementy môžeme pomocou JavaScriptu vytvoriť ako:
$('#myCollapsible').collapse({ toggle: false })
Metódu môžeme volať s parametrami:
"toggle"
- Zviditeľní / skryje Collapsible element, odovzdá riadenie ešte než dôjde k prepnutiu"show"
- Zviditeľní Collapsible element, odovzdá riadenie ešte než dôjde k prepnutiu"hide"
- Skryje Collapsible element, odovzdá riadenie ešte než dôjde k prepnutiu"dispose"
- Odstráni collapse
Môžeme reagovať na nasledujúce javascriptové udalosti:
show.bs.collapse
- Vyvolá sa ihneď po zavolaní metódy s hodnotou"show"
.shown.bs.collapse
- Vyvolá sa po dokončení animácia zobrazenie elementu.hide.bs.collapse
- Vyvolá sa ihneď po zavolaní metódy s hodnotou"hide"
.hidden.bs.collapse
- Vyvolá sa po dokončení animácia skrytie elementu.
$('#collapsible-polozka').on('hidden.bs.collapse', function () { // nějaká reakce... });
V budúcej lekcii, Bootstrap - Dropdowns , sa budeme zaoberať rozbaľovacími tlačidlami Dropdowns.