Új hozzászólás Aktív témák
-
martonx
veterán
válasz indigo #12041 üzenetére
A .on esetében egy felsőbb biztosan létező DOM elemhez szokás kötni az esemény elkapást, és azon belül szűrni a megfelelő selectorral a megfelelő DOM elementre. Ahogy példát is írtam.
Másrészt, ha a menü elemeid mindig léteznek, akkor nincs sok értelme a .on-nak, helyette egy sima .click jobb lenne.
Kicsit olvass utána a javascriptnek, jquery-s esemény kezelésnek, és máris érteni fogod, hogy miről beszélek. Addig nincs értelme többet mondanom, és kérdezned sincs sok értelme.Én kérek elnézést!
-
Sk8erPeter
nagyúr
válasz indigo #12041 üzenetére
Most volt egy kis kedvem+időm foglalkozni a dologgal, összedobtam neked:
http://plnkr.co/edit/9KZzy0hNwcy1AV69AI1C?p=previewJópár dolgot kommenteztem a kódban, próbáltam egyszerű példát mutatni, hogy lehet elkerülni az ilyeneket:
$('.menu01').on('click',function(){
$('#contentContainer').load('home.html');
return false;
});
$('.menu02').on('click',function(){
$('#contentContainer').load('about.html');
return false;
});
...EHELYETT sokkal általánosabban kellene megoldani, plusz az sem jó, hogy a teljes dokumentumot akarod betölteni egy divbe, az egész kerettel, <head>-del és mindennel együtt, pedig igazából a body-n belüli rész az érdekes csak. Most itt egy keretet képező divhez hozzáadtam a "content" id-t mindegyik doksinál, és így jelentősen leegyszerűsödött a dolog:
var $contentContainer = $('#contentContainer');
//....
function navLinkOnClick(event) {
// show loading icon
$contentContainer.html($loadingIconElement);
// load content
$contentContainer.load(event.target.href + " #content", function() {
console.log(event.target.href + " has just been loaded.");
// Initialize Cycle2
$('.cycle-slideshow').cycle({
fx: 'scrollHorz',
speed: 'slow',
});
});
return false;
}
// menu links
$('.nav a').on('click', navLinkOnClick);A lényeg, hogy először egy töltőikont jelenítesz meg, aztán betöltöd a link href-attribútumában lévő URL-t, és a kapott tartalom #content selectorának megfelelő elem tartalmát töltöd csak be ténylegesen a célhelyre. (Ja, amúgy végül a kódban használtam a HTML5-ös <nav> taget a menünél.) A Cycle2-t pedig újra kell inicializálni a dinamikusan betöltött elemre.
Egyébként ha nem dinamikusan töltenéd be a tartalmat, a Cycle2-t nem kellene "kézzel" inicializálni, mert automatikusan inicializálódik azokon az elemeken, amelyek el vannak látva a "cycle-slideshow" osztállyal, és a megfelelő HTML5-ös data-*-attribútumokkal (pl. data-cycle-fx="scrollHorz"), amik további információt biztosítanak róla, hogy milyen opciókkal is kellene inicializálni. Lásd a doksit, és további feltétel, hogy ne legyen ellátva a data-cycle-auto-init="false" attribútum-érték párossal (legalábbis ne false legyen az értéke).A dinamikusan betöltött tartalmaknál azokat a "belső" linkeket vettem figyelembe (amire itt írtad, hogy működjön az "IDE" linkre), amelyek el vannak látva a "navigation-link" osztállyal, és az azokra való kattintást figyelem, és ugyanazt az egy darab event handlert használom fel hozzá, amit az előbb írtam:
$contentContainer.on('click', 'a.navigation-link', navLinkOnClick);
Fontos, hogy úgy általában minden programozási nyelvben figyelj arra, hogy ugyanazt a műveletet ne végezd el többször. Itt például a $('#contentContainer') többször is szerepelt a kódodban, ilyenkor a jQuery megfelelő metódusa mindig kikeresi a #contentContainer selectorra illeszkedő elemet a dokumentumból, pedig ezt elég lenne egyszer elvégezni. Ezért a $('#contentContainer') visszatérési értékét tárold el egy változóban, ahogy fentebb tettem.
A <script> tageket a HTML-kód végére tettem, hogy az ott betöltendő tartalom ne akadályozza/késleltesse a dokumentum betöltését.
Ha valami nem tiszta a magyarázatból vagy a kódból, kérdezz.
(#12044) martonx :
Érthető, nem baj, hátha valaki profitált belőle, hogy ezt megdumáltuk.[ Szerkesztve ]
Sk8erPeter
Új hozzászólás Aktív témák
- JavaScript topic
- Kodi és kiegészítői magyar nyelvű online tartalmakhoz (Linux, Windows)
- Elektromos autók - motorok
- Bambu Lab X1/X1C, P1P-P1S és A1 mini tulajok
- Bluetooth hangszórók
- Épített vízhűtés (nem kompakt) topic
- Kanada feltalálta a Netflix-adót
- Kerékpárosok, bringások ide!
- 2 nm-es chipeknél is modernebb lapkákat fejlesztenek az EU-ban
- Milyen TV-t vegyek?
- További aktív témák...
- ASUS VS228DE 22" 1920x1080 Full HD LED Monitor
- Komplett igényes gamer PC (Monitor, alaplap, cpu, ház, táp,ssd, vga)
- Samsung S34BG850 G8 - 34" Ívelt Smart OLED - 3440x1440 175Hz - 0.1 ms - TrueBlack 400 - FreeSync
- Samsung Galaxy S21+ 5G 256GB Phantom Silver
- HP 255 G8 15.6" FHD IPS Ryzen 7 5700U 16GB DDR4 512GB NVMe SSD gar
Állásajánlatok
Cég: Ozeki Kft.
Város: Debrecen
Cég: Alpha Laptopszerviz Kft.
Város: Pécs