Láthatóság: JS-események

A JS-események szakasz lehetővé teszi, hogy egy elem egy másik elemen végzett művelet (például kattintás vagy rávitt egér) hatására jelenjen meg vagy tűnjön el, opcionálisan animációval. A főtartalom váltogatható például egy gomb kattintásával, rávitt egérrel vagy dupla kattintással.

https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor

A képen a szakasz figyelmeztetése látszik: a „Keep HTML” beállítás (magyarul HTML megtartása) bekapcsolásához eseménykiváltót kell használni.

A használatához az elem Láthatóság fülén be kell kapcsolni a HTML megtartása beállítást.

Példa: videók váltogatása gombokkal

Három videó widget között gombokkal váltasz:

1. Add ugyanazt a választót (például .data) a videó widgeteknek.
2. Húzz be gomb widgeteket, és adj nekik egyedi választót (például azonosítókat: #animals, #cities, #browsers).
3. Menj az egyes videó widgetekhez, nyisd meg a Láthatóság fület, kapcsold be a Láthatóság kapcsolót, és a HTML megtartása beállítást állítsd Igenre.
4. Az események beállításainál add meg az adott widget kiváltóját. Például az „állatok” videónál a kiváltó elem mezőjébe #animals kerül.
5. A többi elem elrejtéséhez használd a videó widgetek közös választóját (nálunk .data).

Az elemeket egy külső elem (például gomb vagy kép) egyetlen kattintása jeleníti meg vagy rejti el, amelyet jQuery-választóval (azonosító vagy osztály) adsz meg. Ha a teljes widgetre állítasz be CSS-azonosítót az Elementor Haladó fülén, jobb, ha kiváltóként ezt adod meg:

#my_button a

Amikor az elem megjelenik, egy másik elemet el is rejthetsz.

Példa: szakasz megjelenítése és elrejtése gombbal

Egy gombra kattintva megjeleníthetsz vagy elrejthetsz egy szakaszt, oszlopot, tárolót vagy bármelyik widgetet.

1. A megjeleníteni kívánt elem Láthatóság fülén kapcsold be az eseményindítót (JS-események), a HTML megtartása beállítást állítsd Igenre, a Megjelenítési mód legyen „megjelenítés”. Ha elrejteni akarsz egy elemet az esemény hatására, a megjelenítési mód lehet „elrejtés” is, és a logikai összekapcsolással több eseményindítót is összeköthetsz.
2. Nyisd meg az események fület, és válassz eseményt a listából. A példában a Click esemény szerepel.
3. Az Eseményindító mezőbe írd be annak az elemnek a választóját, amely a megjelenítést kiváltja, például #showcoffee. Gyermekelemre is mutathatsz, például #showcoffee a.
4. Az Animáció megjelenítése listából válassz animációt, például a Fade-et.
5. Ha az esemény bekövetkeztekor más elemeket is el akarsz rejteni, a Más elemek elrejtése mezőbe írd be azok választóját, például #coffeeimage vagy .coffeeimage.
6. A Kapcsoló beállítást állítsd Igenre, ha azt szeretnéd, hogy az esemény az elemet egyszer megjelenítse, másszor elrejtse.
7. A Tartalékérték beállítással tartalmat is megjeleníthetsz arra az esetre, amikor az esemény nem következett be.
8. Végül add meg az eseményindító elemet. Bármi lehet, a példában egy gomb: a gomb Haladó fülén a CSS-azonosító mezőbe írd be az azonosítót (showcoffee), amelyet az eseményindítónál is használtál.

Események

Esemény	Mikor indul
Click	Az eseményt kiváltó elemre kattintáskor vagy koppintáskor.
Mouseover	Az eseményt kiváltó elem fölé vitt egérrel.
Dbclick	Az eseményt kiváltó elemre duplán kattintva.
Touchstart	A telefon képernyőjének bárhol megérintésekor.
Touchmove	Ha az ujjadat az eseményt kiváltó elemen tartod, és közben görgetsz.

Betöltéskor

Az esemény az oldal betöltésekor is lefuttatható a megadott késleltetéssel és animációval.