Scrollspy
Sabunta kewayawa ta Bootstrap ta atomatik ko jera abubuwan rukuni bisa ga matsayin gungura don nuna wace hanyar haɗin ke aiki a halin yanzu a tashar kallo.
Yadda yake aiki
Scrollspy yana da ƴan buƙatu don yin aiki da kyau:
- Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatar
util.js. - Dole ne a yi amfani da shi akan bangaren Bootstrap nav ko jerin rukuni .
- Scrollspy yana buƙatar
position: relative;abubuwan da kuke leƙo asirin ƙasa, yawanci<body>. - Lokacin yin leken asiri akan wasu abubuwan ban da
<body>, tabbatar an samiheightsaiti kumaoverflow-y: scroll;a yi amfani da su. - Ana buƙatar anka (
<a>) kuma dole ne su nuna wani kashi mai wannanid.
Lokacin da aka yi nasarar aiwatarwa, nav ɗinku ko ƙungiyar jeri za su ɗaukaka daidai da haka, suna matsar da .activeajin daga abu ɗaya zuwa na gaba dangane da makasudin haɗin gwiwa.
Misali a cikin navbar
Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka abubuwan da aka zazzage su ma.
@mai
Abubuwan da ke riƙe wuri don misalin gungurawa. Kun sami mafi kyawun gine-gine. Tambarin fasfo, tana da duniya. Lafiya, sabo, mai zafi, mun same shi a kulle. Ban taba shirya cewa wata rana zan rasa ku ba. Ta cinye zuciyarka. Sumbatar ku tana da kyau, kowane motsi sihiri ne. Ina nufin wadanda, ina nufin kamar ita ce. Gaisuwa da masoya mu yi tafiya. Kawai mallaki dare kamar 4 ga Yuli! Amma ka gwammace a bata.
@mdo
Abubuwan da ke riƙe wuri don misalin gungurawa. Domin ita ce mawaƙin kuma mai zane. (Haka muke yi) Don haka kuna son yin wasa da sihiri. Don haka kawai ka tabbata kafin ka ba ni duka. Ina tafiya, ina tafiya a iska (a daren yau). Tsallake magana, ji duka, lokacin tafiya.
daya
Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
two
Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.
three
Abubuwan da ke riƙe wuri don misalin gungurawa. Idan kana son rawa, idan kana so duka, ka san cewa ni yarinyar da ya kamata ka kira. Tafiya cikin guguwar da zan yi. Don haka bari in sa ku cikin kwat din ranar haihuwa. Wanda ya tafi. Daren Juma'ar da ta gabata, eh ina jin mun karya doka, kullum mu ce za mu tsaya. 'Saboda ita 'yar Yoko ce, kuma tana ɗan 'Oh no'. Ina son droppin jaw', poppin ido', juya kai', shockin jiki'. Ee, mun kara yawan katunan kuɗi kuma an kore mu daga mashaya.
Da wasu ƙarin abun ciki mai riƙe da wuri, don ma'auni mai kyau.
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>
Misali tare da nav
Scrollspy kuma yana aiki tare da nsted .navs. Idan gida .navne .active, iyayensa ma za su kasance .active. Gungura wurin da ke kusa da maɓallin kewayawa kuma duba canjin aji mai aiki.
Abu na 1
Abubuwan da ke riƙe wuri don misalin gungurawa. Wannan yana da alaƙa da abu na 1. Yana ɗaukar ku mil tsayi, tsayi sosai, saboda tana da murmushin duniya ɗaya. Akwai wani bako a gadona, wani irin bugun kai na ke yi. Oh, a'a. A wata rayuwa zan sa ku zauna. 'Saboda ni, Ina iya komai. Wanda ya dace da yaƙi na rawa. An saba sace giyar iyayenku da hawan rufin. Sautin, tan daidaita kuma a shirye, kunna shi yana haifar da nauyi. Soyayyarta kamar magani ce. Ina tsammanin na manta ina da zabi.
Abu na 1-1
Abubuwan da ke riƙe wuri don misalin gungurawa. Wannan yana da alaƙa da abu 1-1. Kun sami mafi kyawun gine-gine. Tambarin fasfo, tana da duniya. Lafiya, sabo, mai zafi, mun same shi a kulle. Ban taba shirya cewa wata rana zan rasa ku ba. Ta cinye zuciyarka. Sumbatar ku tana da kyau, kowane motsi sihiri ne. Ina nufin wadanda, ina nufin kamar ita ce. Gaisuwa da masoya mu yi tafiya. Kawai mallaki dare kamar 4 ga Yuli! Amma ka gwammace a bata.
Abu na 1-2
Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
Item 2
Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.
Item 3
Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.
Item 3-1
Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.
Item 3-2
Abubuwan da ke riƙe wuri don misalin gungurawa. Wannan yana da alaƙa da abu na 3-2. Kai asali ne, ba za a iya maye gurbin ku ba. Duk dare suna wasa, waƙar ku. 'Yan matan California ba mu da tabbas. Kamar tsuntsu mara keji. Babu tsoro yanzu, saki kuma kawai ku sami 'yanci, zan so ku ba tare da wani sharadi ba. Ina iya ganin rubutun a bango. Kuna iya tafiya duniya amma babu abin da ke kusa da bakin tekun zinariya.
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Misali tare da rukuni-rukuni
Scrollspy kuma yana aiki tare da .list-groups. Gungura yankin kusa da rukunin jerin kuma duba canjin aji mai aiki.
Abu na 1
Abubuwan da ke riƙe da wuri don misalin rukuni-rukuni na gungurawa. Wannan yana da alaƙa da abu na 1. Kada ku buƙaci gafara. Babu tsoro yanzu, saki kuma kawai ku sami 'yanci, zan so ku ba tare da wani sharadi ba. Daren juma'a da ya gabata. Kar ka kasance mai jin kunya kinda guy zan yi fare yana da kyau. Summer bayan makarantar sakandare lokacin da muka fara haduwa. Domin ita ce mawaƙin kuma mai zane. Menene? Jira Tunani cewa ni banda.
Abu na 2
Abubuwan da ke riƙe da wuri don misalin rukuni-rukuni na gungurawa. Wannan yana da alaƙa da abu na 2. Ee, tana rawa don bugun kanta. Oh, a'a. Kuna iya zama mafi girma. 'Saboda, baby, kai wasan wuta ne. Wataƙila dalilin da yasa duk kofofin ke rufe. Bude zuciyar ku kawai bari ta fara. Don haka très chic, eh, tana da kyan gani.
Abu na 3
Abubuwan da ke riƙe da wuri don misalin rukuni-rukuni na gungurawa. Wannan yana da alaƙa da abu na 3. Muna tafiya sama da girma. Ba ɗaya ba tare da ɗayan ba, mun yi yarjejeniya. Ina tafiya akan iska. Wani ya ce an cire tattoo ɗinka. Yanzu ina shawagi kamar malam buɗe ido. Sautin, tan daidaita kuma a shirye, kunna shi yana haifar da nauyi. Domin da zarar ka zama nawa, da zarar ka zama nawa. Dole ne kawai ku kunna hasken kuma ku bar shi ya haskaka! Don haka mun buga boulevard. Shin kun taɓa ji, ji kamar siriri takarda. Na ga shi duka, na gani yanzu.
Abu na 4
Abubuwan da ke riƙe da wuri don misalin rukuni-rukuni na gungurawa. Wannan yana da alaƙa da abu na 4. Lokacin bazara bayan makarantar sakandare lokacin da muka fara haduwa. Babu tsoro yanzu, saki kuma kawai ku sami 'yanci, zan so ku ba tare da wani sharadi ba. Fatar da ta sumbace ta da zafi sosai za mu narke popsicle. Wannan soyayya za ta sa ka levite.
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
Amfani
Ta hanyar bayanan halayen
Don ƙara halayyar scrollspy cikin sauƙi zuwa kewayawa na saman mashaya, ƙara data-spy="scroll"zuwa ɓangaren da kuke son yin rahõto a kai (mafi yawanci wannan shine <body>). Sannan ƙara data-targetsifa tare da ID ko aji na ɓangaren mahaifa na kowane .navɓangaren Bootstrap.
body {
position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Ta hanyar JavaScript
Bayan ƙara position: relative;a cikin CSS ɗin ku, kira gungurawa ta hanyar JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
Ana buƙatar makasudin ID mai warwarewa
Dole ne hanyoyin haɗin Navbar su kasance da maƙasudin id masu warwarewa. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin DOM kamar <div id="home"></div>.
Abubuwan :visibleda ba manufa ba sun yi watsi da su
Abubuwan da ba su :visibledace da jQuery ba za a yi watsi da su kuma ba za a taɓa haskaka abubuwan da suka dace ba.
Hanyoyin
.scrollspy('refresh')
Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Yana lalata rubutun gungurawa.
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset="".
| Suna | Nau'in | Default | Bayani |
|---|---|---|---|
| biya diyya | lamba | 10 | Pixels don kashewa daga sama yayin ƙididdige matsayi na gungurawa. |
| hanya | kirtani | mota | Nemo wanne yanki ne ɓangaren leƙen asiri ke ciki. autozai zaɓi hanya mafi kyau don samun haɗin gwiwar gungurawa. offsetzai yi amfani da hanyar daidaitawa jQuery don samun haɗin gwiwar gungurawa. positionzai yi amfani da hanyar matsayin jQuery don samun haɗin gwiwar gungurawa. |
| manufa | zaren | jQuery abu | DOM element | Yana ƙayyade kashi don amfani da Scrollspy plugin. |
Abubuwan da suka faru
| Nau'in Taron | Bayani |
|---|---|
| kunna.bs.scrollspy | Wannan taron yana ƙone ɓangaren gungurawa a duk lokacin da sabon abu ya kunna ta hanyar gungurawa. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})