CodeWatchers

Kako zgraditi dinamični popover (plavajoči meniji) v Diviju s Popper.js

Blair Jersyer Divi Tutorials Feb 24, 2022

Ste že kdaj slišali za knjižnico z imenom popper.js ? Ta knjižnica vam omogoča ustvarjanje popoversov na JavaScriptu. Uporaba popoversov je danes precej pogosta, zlasti ker pomaga prikazati dodatne informacije o določenem elementu (gumb, povezava itd.). Razlog za razmišljanje o dinamičnem pojavnem prikazu je predvsem zagotovitev, da se prikaže na pravem mestu glede na položaj motiva na zaslonu. Konkretno, če je predmet na dnu zaslona, ​​se bo pojavno okno prikazalo na vrhu. Če se nahaja na vrhu zaslona, ​​se bo pojavno okno prikazalo na dnu itd.

Kako zgraditi dinamični popover (plavajoči meniji) v Diviju s Popper.js

V tej vadnici bomo izkoristili moč Popper.js v Diviju za ustvarjanje dinamičnih popov (plavajočih menijev), ko kliknete gumb. To bo omogočilo vsakomur, da ustvari pojavno okno z elementi Divi, da prikaže poljubno vsebino po kliku gumba. Poskrbeli bomo tudi za to, da bo pojavni pojav dinamičen, saj bo prilagodil svoj položaj, da bo ohranil najbolj idealno vidljivost, ko uporabnik komunicira z vašo stranjo.

Tukaj je ilustracija pozicioniranja teh popovers…

Da bi to dosegli, potrebujemo nekaj CSS in JavaScript po meri. Še vedno pa se lahko zanesemo na zmogljive oblikovalske zmogljivosti Divi Builderja, da ustvarimo popover s katerim koli elementom Divi.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Naj ’s začnemo!

Predogled plavajočega menija

Tukaj je hiter pogled na plavajoči meni, ki ga bomo oblikovali v tej vadnici. Vidite lahko, kako se položaj plavajočega menija dinamično spreminja, ko se uporabnik pomika ali spreminja velikost brskalnika. Prav tako ne zamudite majhne puščice, ki je nameščena tako, da dinamično kaže na svojo referenco (ali v tem primeru na gumb).

Ustvarjanje Popoverja s Popper.js v Diviju

Kot smo že povedali, bomo v Diviju uporabili popper.js, da ustvarimo dinamično pozicioniran pojavni pojav, ki se razkrije ob kliku na zadevo pojavnega okna (gumb). Z Divijem lahko preprosto ustvarimo plavajoči meni in gumb. Nato bomo kasneje dodali kodo, ki je potrebna, da bosta oba dela v harmoniji.

Oddelek

Zato bomo začeli z dodajanjem ID-ja stranke v običajni razdelek, ki je privzeto pripravljen. Odprite nastavitve razdelka in dodajte naslednji ID:

  • ID CSS: popper-section

Ustvarite Popper Popover z Divi Row

Nato bomo v razdelek dodali vrstico z enim stolpcem. Ta vrstica bo postala naš Popper pojavni element, ki se prikaže, ko kliknete gumb.

Odprite nastavitve vrstice in posodobite slog na naslednji način:

  • Barva ozadja: #333333
  • Širina žleba: 2
  • Širina: 100%
  • Največja širina: 500 slikovnih pik
  • Odmik: 0px zgoraj, 0px spodaj, 0px levo, 0px desno
  • Zaobljeni vogali: 10px

Ker bo ta vrstica postala naš popper popover element, moramo dodati CSS ID, ki bo služil kot izbirnik v naši kodi. Poskrbeti moramo tudi, da ostane vidljivost na prelivu (skrivajo ga zaobljeni vogali).

Pojdite na zavihek napredno in posodobite naslednje:

  • ID CSS: popper-popup
  • Horizontalni preliv: viden
  • Navpični preliv: viden

Dodajmo vsebino v Popover Row

V našo vrstico lahko dodamo poljuben(e) modul(e), da napolnimo plavajoči meni s poljubno vsebino. Za ta primer bomo dodali nekaj gumbov v vrstico, ki služi kot meni po meri, ki se prikaže v pojavnem oknu.

Za začetek dodajte modul gumbov v stolpec vrstice.

Zdaj naj ’s dodamo nekaj stilov našemu gumbu. Nastavitve gumbov bomo posodobili na naslednji način:

  • Poravnava gumbov: sredina
  • Uporabite sloge po meri za gumb: DA
  • Širina obrobe gumba: 1px
  • Barva obrobe gumba: #555555
  • Polmer obrobe gumba: 10 slikovnih pik
  • Ikona gumba: glejte posnetek zaslona
  • Rob: 20px zgoraj, 20px spodaj, 20px levo, 20px desno
  • Oblazinjenje: 0,5 em zgoraj, 0,5 em spodaj, 2 em levo, 2 em desno

Pomembno: Za ustvarjanje razmika uporabljamo rob na modulu, namesto da bi uporabljali vrzeli v vrsticah, ker bomo dodali puščico (z uporabo delilnika), ki jo je treba postaviti na rob vrstice (z absolutnim položajem). Vsako odmik vrstice ali stolpca bo potisnil puščico stran od roba.

Zdaj moramo glavnemu elementu dodati naslednji odrezek CSS po meri, da bo gumb obsegal celotno širino stolpca/vrstice:

display: block !important

Zdaj lahko dvakrat (ali večkrat) podvojite gumb, da dodate še nekaj gumbov v pojavno okno našega menija.

Ustvarjanje puščice Popover

Popper.js podpira pozicioniranje puščice skupaj s pojavnim prikazom. Če želite zgraditi puščico, dodajte nov delilnik pod zadnjim gumbom v naši vrstici.

V nastavitvah delilnika izberite, da se delilnik ne prikaže. Nato pod zavihkom napredno dodajte naslednji ID CSS:

  • ID CSS: popper-puščica

We’ bomo uporabili zunanji CSS po meri za kasnejše oblikovanje in pozicioniranje puščice.

Ustvarjanje Popover gumba (ali reference)

Dva ključna elementa popoverja vključujeta element popover (ali popper) in predmet, na katerega se popover pritrdi. Lahko uporabite kateri koli element Divi kot referenco, ki generira pojavno okno, vendar bomo za ta primer uporabili gumb.

Ustvarjanje teme za Popper: gumb

Preden ustvarimo svoj gumb, moramo pod našo vrstico popover dodati novo vrstico z enim stolpcem.

Nato v vrstico dodajte nov modul gumbov.

Posodobite nastavitve gumbov z nekaj osnovnimi slogi, kot sledi:

  • Barva besedila gumba: #ffffff
  • Barva ozadja gumba: #a043e8
  • Širina obrobe gumba: 0px
  • Polmer obrobe gumba: 10 slikovnih pik

Nato dodajte potreben ID CSS, ki nam bo omogočil, da ciljamo in pozneje uporabimo gumb kot našo referenco za pojavni pojav:

  • ID CSS: popper-gumb

Dodajmo kodo

Zdaj, ko sta naš pojavni pojav in gumb končana, smo pripravljeni dodati kodo, da se čarovnija zgodi.

Če želite to narediti, dodajte kodni modul pod modul referenčnega gumba v drugi vrstici.

Za delovanje je pomembno, da je koda na dnu strani.

Najprej bomo ’ dodali CSS.

V polje z vsebino kode dodajte slogovne oznake, ki so potrebne za ovijanje CSS v HTML. Nato kopirajte in prilepite naslednji CSS med slogovne oznake:

/*hide and show popup styling*/#popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;}/*keep popper visible in the Divi Builder for editing*/#et-fb-app #popper-popup {display: block;} /*build the arrow targeting the divider with class 'popper-arrow'*/#popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);}/*position arrow using popper.js data-popper-placement attribute*/#popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;}#popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;}#popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;}#popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;}/*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

Nato moramo dostopati do knjižnice popper.js tako, da dodamo ascript, ki uvozi Popper.js iz njihovega CDN (https://unpkg.com/@popperjs/core@2). Pod oznako endingstyle prilepite naslednji skript v kodno polje.

Za uvoz knjižnice uporabite naslednji src v oznaki skripta:

src="https://unpkg.com/@popperjs/core@2"

Izgledalo bi takole:

Zdaj bomo uvozili Popper.js, preden bomo dodali kodo, ki ga bo uporabljala. Torej, potem ko skripta pokaže na Popper.js, dodajte potrebne oznake skripte, da zavijemo Javascript, ki ga moramo dodati. Nato med oznake script prilepite naslednji Javascript.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow");let popperInstance = null;//create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});}//destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}}//show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();}//hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();}//toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

To je ’! Vsi smo končali. Zdaj pa preverimo končni rezultat.

Predogled končnega rezultata

Če si želite ogledati rezultat te vadnice, moramo ustvariti nekaj prostora za drsenje, da preizkusimo čarovnijo pozicioniranja popper popoverja.

Če želite to narediti, odprite nastavitve razdelka in dodajte nekaj robov, kot sledi:

  • Marža: 80vh zgoraj, 80vh spodaj

Takole izgleda funkcionalnost:

Upoštevajte, kako se položaj pojavnega okna (in puščice) dinamično spreminja, ko se uporabnik pomika ali spreminja velikost brskalnika.

Povzetek

Če želite ustvariti popover z uporabo popper.js v Diviju, se boste morali zanesti na dober del Javascripta, vendar je rezultat vreden tega. Dinamično pozicioniranje popoverja je tako odlična komponenta uporabniškega vmesnika, ki bi koristila vsakemu spletnemu mestu. Kaj menite o tem? Ali ste že poskusili? Sporočite nam.

Divi WordPress Theme