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">&laquo;</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">&raquo;</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">&times;</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">&times;</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.