22. diel - Bootstrap - Paginace, Upozornenie a Drobečková navigácie
V predchádzajúcom cvičení, Riešené úlohy k 20.-21. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V minulej lekcii, Riešené úlohy k 20.-21. lekciu Bootstrap CSS frameworku , sme dokončili téma navigácie. Dnes nás čaká niekoľko jednoduchších komponentov, sú to Pagination, Alerts a Breadcrumb. Pokračujeme v kurze populárneho CSS frameworku Bootstrap.
Paginace
Paginaci, česky stránkovanie, sa u väčšieho počtu dát nevyhneme. Jednak je pre užívateľa nepríjemné prečítať sa tisíckami záznamy na jedinej stránke a tiež nám na výpis desiatok alebo stoviek tisíc záznamov na jednu stránku už nemusí stačiť výkon servera. Príjemnou alternatívou paginace je načítanie ďalších položiek Ajax pri rolovaní stránky nadol. To sa používa najmä na sociálnych sieťach a aj ITnetwork má na hlavnej stránke podobný mechanizmus. Toto riešenie sa však nehodí v prípade, keď sa potrebujeme dostať do určitej časti dát, napríklad do polovice alebo na koniec. K tomu je ideálny stránkovanie, kde si zvolíme na ktorú stránku chceme prejsť a vidíme tiež celkový počet stránok. Máme tak oveľa lepší prehľad o danej vzorke dát.
Pre paginaci používame zoznam, konkrétne element <ul>
,
rovnako ako pre väčšinu navigačných prvkov v Bootstrap. Pre lepšiu
sémantiku celý zoznam vkladáme ešte do elementu <nav>
,
pretože paginace je v podstate navigácia. Ukážme si najprv zdrojový kód
paginační komponenty, ktorý si vzápätí popíšeme.
<nav aria-label="Stránkování"> <ul class="pagination"> <li class="page-item disabled"> <span aria-hidden="true" class="page-link">«</span> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
V kóde máme opäť nejaké "aria" atribúty pre hlasové čítačky.
Zoznamu sme priradili triedu .pagination
. Jednotlivým prvkom
zoznamu pridávame triedu .page-item
. Prvý prvok je odkaz na
predchádzajúcu stránku, ktorý má ikonu dvojitej šípky vľavo ( «, entita
«
). Všimnite si, že v ňom nie je odkaz, to aby sme si
ukázali ako to urobiť, ak sme na prvej stránke a na predchádzajúcu stránku
sa teda presunúť nedá. Zašednutie prvku docielime triedou
.disabled
. Ďalšie prvky zoznamu obsahujú odkazy na jednotlivé
stránky, tým priraďujeme triedu .page-link
. Elementu
<li>
aktívne stránky, tu stránky 1, navyše pridávame
triedu .active
. Posledný odkaz je už kompletná. Do atribútov
href
si samozrejme na serveri vygenerujete korektné odkazy na
dané stránky.
Výsledok v prehliadači:
Teoreticky by sme mohli odkaz do prvého elementu umiestniť tiež, vďaka
triede .disabled
by na neho nešlo kliknúť. Prakticky by išiel
ale rovnako označiť pomocou klávesy tab a preto by sme ho do
stránky nemali vôbec umiestňovať alebo by sme k nemu mali priradiť atribút
tabindex="-1"
.
Veľkosti
Paginaci môžeme zobraziť v 3 veľkostiach, rovnako ako väčšinu
Bootstrapových komponentov. Elementu <ul>
môžeme dodať
okrem .pagination
ešte triedu:
.pagination-lg
pre väčšiu veľkosť- Ponecháme len sa triedou
.pagination
pre štandardnú veľkosť .pagination-sm
pre menšiu veľkosť
Zarovnanie
Pre zarovnanie paginace používame flexbox utility. Pokiaľ ju chceme
zarovnať na stred, pridáme elementu <ul>
triedu
.justify-content-center
. Ak vpravo, pridáme triedu
.justify-content-end
.
Paginaci môžete na serveri oživiť napr. Podľa nášho tutoriálu Paginace (stránkovanie) v PHP.
Upozornenie
HTTP je bezstavový protokol a práca s webovými aplikáciami často prebieha jednoduchým prechádzaním medzi odkazy. Keďže užívateľ nekomunikuje s klasickou desktopovú aplikácií, môže si byť na webe často neistý, či sa jeho požiadavka naozaj medzi jednotlivými prechodmi medzi stránkami korektne odoslal alebo naopak prečo nedošlo k očakávanému správaniu. Určite užívateľovi nebudeme zobrazovať kontextové informačné okná (pop-upy), pretože web sa ovláda inak ako desktop, stránky máme v záložkách, obsahom rolujeme. O účele upozornenie sa na webe spopularizovali tzv. Hrianok notifikácia. Hrianok preto, že často vyjdú ako toast z hriankovača. Môžete sa tiež stretnúť s názvom flash message. Bootstrap tieto správy zavádza jednoducho ako alerty (upozornenie) a poskytuje pre nich predpripravené štýly a dokonca aj nejaké javascriptové vychytávky.
Alert vytvoríme pomocou elementu <div>
s triedou
.alert
. Podľa typu upozornenia potom pridáme ešte jednu z
nasledujúcich tried:
- .alert-primary - Hlavné farba, ako predvolené modrá
- .alert-secondary - Druhá hlavná farba, východiskové šedá
- .alert-success - Zelená na úspešné hlášky.
- .alert-danger - Červená pre chyby.
- .alert-warning - Žltá pre zvýraznenie dôležitých hlášok.
- .alert-info - Neutrálny modrá pre neutrálne hlášky.
- .alert-light - Svetlučko sivá.
- .alert-dark - Takmer čierna.
Zdrojový kód takého Alertu by mohol vyzerať nasledovne:
<div class="alert alert-success" role="alert"> Zpráva byla úspěšně odeslána. </div>
Atribút role
slúži pre hlasové čítačky. Okrem farby by
sme ideálne mali opäť pridať aj text pre hlasové čítačky skrytý pomocou
triedy .sr-only
, kde bude typ tejto hlášky popísaný.
Použitie alertov v stránke vyzerá následne takto:
Farba odkazu
Do hlášok často vkladáme odkazy. Tie sa pekne sfarbí ak im priradíme
triedu .alert-link
.
Ďalší HTML obsah
Keďže sú upozornenia blokové elementy, môžeme do nich okrem textu a odkazov vkladať aj nadpisy, odseky, oddeľovače a ďalšie HTML obsah.
Zatváranie hlášok
Bootstrap spolupracuje s jQuery.
Pokiaľ si načítame JavaScript k Bootstrap (dostupný na http://getbootstrap.com/) a pridáte
alertům triedu .alert-dismissible
, môže ich používateľ
následne zavrieť pomocou ikonky krížika v pravom hornom rohu. Tlačidlo
musíme do HTML kódu pridať v podobe elementu <button>
s
triedou .close
a dáta atribútom
data-dismiss="alert"
. Ak pridáme ešte triedy .fade
a
.show
, docielime animácie.
Zdrojový kód zatvárateľné hlášky s odkazom a ďalším HTML obsahom by mohol vyzerať napr. Nasledovne:
<div class="alert alert-success alert-dismissible fade show" role="alert"> <p><strong>Registrace byla úspěšná</strong> a na váš email byl odeslán potvrzující kód.</p> <hr> <p>Jste již jen krok od svých nových IT znalostí a skvělého zaměstnání!</p> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
Atribúty s prefixom aria-
sú opäť pre hlasové
čítačky.
Uzavretie hlášky element zo stránky kompletne odstráni. V JavaScriptu možné na uzavretie Alertu ešte reagovať, môžete tu napr. Uložiť do cookie, aby sa už nabudúce nezobrazoval:
$('#alert-reklama').on('closed.bs.alert', function () { // ... kód k vytvoření cookie ... });
Close utilita
Zatváracie tlačidlo môžeme používať ik akýmkoľvek ďalším účely mimo upozornenia. Vytvoríme ho nasledujúcim spôsobom:
<button type="button" class="close" aria-label="Zavřít"> <span aria-hidden="true">×</span> </button>
Zatváranie si musíme napísať sami pomocou JavaScriptu.
Breadcrumb
Drobečková navigácie je bezpochyby dôležitým ovládacím prvkom
väčších webov. Iste ste ju už niekedy videli, máme ju aj tu na ITnetworku,
kde signalizuje v akej ste sekcii a aké sekcie sú nad vami. O kus vyššie by
ste mali vidieť niečo ako Domů -> HTML a CSS -> Bootstrap
.
Náhodný užívateľ z internetu teda pri vygooglení tohto článku jednoducho
zistí, že ITnetwork.cz nie je stránka len o Bootstrap, ale že sa jedná o
nejaký kurz a možno klikne na sekciu HTML a CSS a začne sa zaujímať o
ďalšie kurze webdesignu. A alebo klikne na domček a zistí, že učíme aj
všetky ďalšie IT technológie. Určite chcete, aby vaši užívatelia boli
motivovaní web takhle preskúmavať.
Navigácia funguje ako keď Janko s Marienkou trúsili omrvinky, aby sa mohli vrátiť z temného lesa domov. Aj používateľ, ktorý sa ocitne na nejaké zanorené podstránke, sa môže chcieť vrátiť o kategóriu vyššie, v čom mu nie vždy pomôže tlačidlo "Späť". Pokiaľ mu túto funkčnosť neumožníte, je možné, že stránku radšej frustrovaní opustí, než aby zisťoval ako sa do danej sekcie dostane. Pri veľmi jednoduchých informačných webov je naopak Drobečková navigácia na škodu, pretože zesložiťuje dizajn stránky a vďaka plytkým kategóriám nemá žiadnu pridanú hodnotu.
Asi vás neprekvapí, že navigáciu do stránky vkladáme ako ostylovaný
zoznam. Keďže záleží na poradí prvkov, sémanticky je najsprávnejšie
využiť element <ol>
.
<nav aria-label="Drobečková navigace" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Domů</a></li> <li class="breadcrumb-item"><a href="#">HTML a CSS</a></li> <li class="breadcrumb-item active" aria-current="page">Bootstrap</li> </ol> </nav>
Atribút aria-label
je opäť dodatočný popisok pre hlasové
čítačky.
Výsledok v prehliadači:
V budúcej lekcii, Bootstrap - Modálne dialógy , sa budeme venovať modálne dialógom.