Bootstrap - Scrollspy: руковод novičkov

Zdravo, ambiciozni web programeri! Dnes smo se odecili v zanimivo funkcijo Bootstrap, imenovano Scrollspy. Ne skrbite, če ste novinci v programiranju - vam bom vodil čez to temo korak za korakom, kot sem to že več let delal za svoje učence. Zgrabilete si še eno kavo in začnimo!

Bootstrap - Scrollspy

Kaj je Scrollspy?

Preden se poglobimo v tehničnosti, poberimo si, kaj je Scrollspy. Predstavite si, da berete dolgo članek na spletu in ko drsnete, navigacijski meni samodejno poudari razdelek, ki ga trenutno bereš. To je Scrollspy v akciji! To je zelo uporabna funkcija, ki izboljša uporabniško izkušnjo z zagotavljanjem vizualne povratne informacije o trenutnem položaju uporabnika v vsebini.

Kako deluje

Scrollspy deluje tako, da spremlja položaj drsenja vaše spletne strani in posodablja aktivno stanje vaših navigacijskih elementov glede na to. Je kot majhen vohun (zato ime!), ki opazuje, kje ste na strani in pove vašemu navigacijskemu menuju: "Hej, uporabnik je zdaj tukaj!"

Poglejmo osnovni primer:

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Razdelek 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Razdelek 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Razdelek 1</h4>
<p>...</p>
<h4 id="section2">Razdelek 2</h4>
<p>...</p>
</div>
</body>

V tem primeru smo Bootstrapu povedali, naj spremlja položaj drsenja (data-bs-spy="scroll") in posodablja navigacijo v #navbar-example. Ko drsnete skozi vsebino, se ustrezen navigacijski element poudari.

Navigacijski meni

Ena izmed najpogostejših uporabnosti Scrollspy je z navigacijskim menijem. Poglejmo podrobnejši primer:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navigacijski meni</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Prvi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Drugi</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">Prvi naslov</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Drugi naslov</h4>
<p>...</p>
</div>

V tem primeru imamo navigacijski meni z dvema povezavama. Ko drsnete skozi vsebino, se ustrezen element navigacijskega menija poudari. Je kot GPS za vašo spletno stran!

Vgrajeni navigacijski meni

Včasih želite imeti vgrajene navigacijske elemente. Scrollspy to tudi podpira! Oglejmo si, kako:

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navigacijski meni</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Predmet 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Predmet 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Predmet 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Predmet 2</a>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Predmet 1</h4>
<p>...</p>
<h5 id="item-1-1">Predmet 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Predmet 1-2</h5>
<p>...</p>
<h4 id="item-2">Predmet 2</h4>
<p>...</p>
</div>

To ustvari vgrajeno navigacijsko strukturo, ki se posodablja, ko drsnete skozi različne razdelke in podrazdelke. Je kot imeti poglavja in podpoglavja v knjigi, ampak interaktivno!

Seznami

Scrollspy ni omejen le na navigacijske menije. Ga lahko uporabite tudi s seznami:

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Predmet 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Predmet 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Predmet 1</h4>
<p>...</p>
<h4 id="list-item-2">Predmet 2</h4>
<p>...</p>
</div>

To ustvari seznam, ki se posodablja, ko drsnete skozi vsebino. Je kot imeti kazalo, ki vedno ve, kje ste v knjigi!

Preprosti vezji

Včasih želite uporabiti preproste vezje namesto polnega navigacijskega menija ali seznama:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navigacijski meni</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

To ustvari preproste vezji, ki se posodablja, ko drsnete. Je kot imeti znamke v vaši spletni strani, ki se povečajo, ko jih dosežete!

Nevidni elementi

Scrollspy lahko deluje tudi z elementi, ki niso na začetku vidni:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navigacijski meni</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">ena</h4>
<p>...</p>
<h4 id="two">dve</h4>
<p>...</p>
<h4 id="three">tri</h4>
<p>...</p>
</div>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

V tem primeru bo Scrollspy še vedno deloval z elementi, ko pridejo v vidno območje. Je kot vohun, ki lahko vidi skozi zidove!

Uporaba

Za uporabo Scrollspy morate narediti tri stvari:

Dodajte data-bs-spy="scroll" na element, ki ga želite nadzorovati (običajno <body>).
Dodajte data-bs-target="#navId" za določitev navigacije, ki bo uporabljena za scrollspy.
Dodajte data-bs-offset="" za določitev števila pikslov za odmik od vrha pri izračunu položaja drsenja.

Tukaj je tabela vseh lastnosti, ki jih lahko uporabite:

Lastnost	Tip	Privzeto	Opis
data-bs-spy	string	-	Aktivira scrollspy
data-bs-target	string	-	Določi kateri navigacijski meni bo uporabljen za scrollspy
data-bs-offset	string	-	Število pikslov za odmik od vrha pri izračunu položaja drsenja
data-bs-method	string	'auto'	Najde kateri razdelek je v drsnem elementu

Možnosti

Scrollspy lahko tudi inicializirate z JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})

Tukaj je tabela vseh možnosti, ki jih lahko uporabite:

Možnost	Tip	Privzeto	Opis
offset	number	10	Število pikslov za odmik od vrha pri izračunu položaja drsenja
method	string	'auto'	Najde kateri razdelek je v drsnem elementu
target	string	''	Določi kateri navigacijski meni bo uporabljen za scrollspy

CSS lastnosti

Scrollspy uporablja nekaj CSS lastnosti, da deluje čudežno:

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

Lastnosti position: relative in overflow: auto sta ključni za pravilno delovanje Scrollspy.

In tukaj ste! Sedaj ste opremljeni z znanjem za uporabo Bootstrapovega Scrollspyja. Ne забravajte, da vaja dela perfect, torej ne bójte se eksperimentirati z temi primeri. Srečno kodiranje in da bo vaše drsenje vedno gladko!

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - индикатор прогресса

Следующий учебник:

Bootstrap - индикаторы загрузки