ITnetwork summer 2020
80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

25. diel - Bootstrap - Scrollspy

V minulej lekcii, Bootstrap - Popovers , sme si predstavili Popovers. Zostávajú nám už len posledný 2 Bootstrap komponenty. V dnešnom tutoriále tohto CSS frameworku bude reč o prvý z nich - Scrollspy.

Scrollspy

Skrolovacie špión je komponenta, ktorá umožňuje zobrazovať v akej časti stránky sa nachádzame a to podľa pozície nášho scrollbaru. Zobrazovanie našej pozície prebieha v komponentoch Navigation alebo List Group.

Scrollspy potrebuje mať na scrollovacím elementu, najčastejšie na <body>, nastavené position: relative. Ak Scrollspy použijeme na ktoromkoľvek inom elementu, mal by mať samozrejme nastavenú výšku a overflow-y: scroll, aby sa na ňom scrollbar zobrazil :) V navigácii používame výhradne elementov <a>. Aktuálny prvok bude v navigácii automaticky označený triedou .active, ale ten prvý musíme označiť sami.

Ukážky

Scrollspy si ukážeme na rôznych komponentoch.

Navbar

Ako prvý si komponent predvedieme na Navbar:

<body data-spy="scroll" data-target="#navbar-ukazka" data-offset="70" style="position: relative">
    <nav id="navbar-ukazka" class="navbar navbar-light bg-light sticky-top">
        <a class="navbar-brand" href="#">Navigace</a>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#lorem">Lorem ipsum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#duis">Duis semper</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Další</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#fusce">Fusce erat eros</a>
                </div>
            </li>
        </ul>
    </nav>
    <div>
        <h4 id="lorem">Lorem ipsum</h4>
        <p>...</p>
        <h4 id="duis">Duis semper</h4>
        <p>...</p>
        <h4 id="fusce">Fusce erat eros</h4>
        <p>...</p>
    </div>
</body>

Elementu, ktorým chceme scrollovať, najčastejšie <body>, pridáme atribút data-spy="scroll" a data-target s voličom navigácie. Tým je scrollspy pripravený. Aby prepojenie medzi navigáciou a obsahom fungovalo, musí odkazy viesť na ID príslušných elementov obsahu, ktorý chceme sledovať. Samozrejme nesmieme zabudnúť pripojiť aj Bootstrap JavaScript. Navigáciu držíme stále hore pomocou triedy .sticky-top.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Výsledok v prehliadači:

Scrollspy v Bootstrap
scrollspy_navi­gace.html

Skúste si posunúť scrollbar, navigácia sa bude prepínať podľa toho v akej časti dokumentu sa nachádzate. Scrollspy ignoruje neviditeľné elementy.

Viacúrovňová navigácia

Scrollspy dokáže ho vydať aj rodičia elementu v navigácii, ak je viacúrovňová. Skúsme si to:

<body data-spy="scroll" data-target="#navbar-ukazka" data-offset="70" style="position: relative">
    <div class="row">
        <div class="col-4">
            <nav id="navbar-ukazka" class="navbar navbar-light bg-light sticky-top">
                <a class="navbar-brand" href="#">Navigace</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link active" href="#lorem">Lorem ipsum</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link ml-3 my-1" href="#aenean">Aenean a condimentum</a>
                        <a class="nav-link ml-3 my-1" href="#vivamus">Vivamus</a>
                    </nav>
                    <a class="nav-link" href="#duis">Duis semper</a>
                    <a class="nav-link" href="#fusce">Fusce erat eros</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link ml-3 my-1" href="#mauris">Mauris tempor</a>
                    </nav>
                </nav>
            </nav>
        </div>

        <div class="col-8">
            <h4 id="lorem">Lorem ipsum</h4>
            <p>...</p>
            <h5 id="aenean">Aenean a condimentum</h5>
            <p>...</p>
            <h5 id="vivamus">Vivamus</h5>
            <p>...</p>
            <h4 id="duis">Duis semper</h4>
            <p>...</p>
            <h4 id="fusce">Fusce erat eros</h4>
            <p>...</p>
            <h5 id="mauris">Mauris tempor</h5>
            <p>...</p>
        </div>
    </div>
</body>

A živá ukážka:

Scrollspy v Bootstrap
scrollspy_vice­urovnovy.html

List group

Ukážky zavŕšime vytvorením zvislej navigácie komponentom List Group.

<body data-spy="scroll" data-target="#list-example" data-offset="70" class="scrollspy-example" style="position: relative">
    <div class="row">
        <div class="col-4">
            <div id="list-example" class="list-group sticky-top">
                <a class="list-group-item list-group-item-action active" href="#lorem">Lorem ipsum</a>
                <a class="list-group-item list-group-item-action" href="#duis">Duis semper</a>
                <a class="list-group-item list-group-item-action" href="#fusce">Fusce erat eros</a>
            </div>
        </div>

        <div class="col-8">
            <h4 id="lorem">Lorem ipsum</h4>
            <p>...</p>
            <h4 id="duis">Duis semper</h4>
            <p>...</p>
            <h4 id="fusce">Fusce erat eros</h4>
            <p>...</p>
        </div>
    </div>
</body>

Živá ukážka:

Scrollspy v Bootstrap
scrollspy_lis­t_group.html

Javascript

Komponent opäť môžeme ovládať z JavaScriptu.

Inicializácia

Namiesto použitia dáta atribútu môžeme vykonať inicializáciu volaním metódy scrollspy():

$('body').scrollspy({ target: '#navbar-ukazka' });

Vlastnosti

Pomocou dáta atribútu data-offset alebo JS vlastnosti offset môžeme nastaviť odsadenie od horného okraja obrazovky, od ktorého sa počíta pozície scrollbaru. Predvolená hodnota je 10. Zvyčajne vyzerá lepšie nastaviť vyššiu hodnotu, napr. Tu v ukážkach sme použili 70, aby sa nemuselo prísť až úplne k nadpisu, ale len do jeho tesnej blízkosti.

Metódy

Metóde scrollspy() môžeme odovzdať nasledujúce parametre:

  • "refresh" - Ak používame scrollspy a pridali sme do stránky nejaký obsah alebo sme ho odobrali, musíme scrollspy obnoviť odovzdaním práve tohto parametra metóde scrollspy("refresh"). Kód pre obnovenie všetkých scrollspy na stránke by vyzeral takto:
$('[data-spy="scroll"]').each(function () {
    var $spy = $(this).scrollspy("refresh");
})

"dispose" - Zničí scrollspy elementu. Udalosti

Môžeme reagovať na udalosť activate.bs.scrollspy, ktorá sa vyvolá vo chvíli, keď scrollspy aktivuje položku navigácie. Reakcia na túto udalosť by mohla vyzerať napr. Nasledovne:

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
    // nějaká reakce...
});

V budúcej lekcii, Bootstrap - tooltip , dokončíme Bootstrap komponenty :) Reč bude o tooltip.


 

Predchádzajúci článok
Bootstrap - Popovers
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!