- Facebook és Messenger
- Vodafone otthoni szolgáltatások (TV, internet, telefon)
- Linux kezdőknek
- Windows 10
- Telekom otthoni szolgáltatások (TV, internet, telefon)
- Windows 11
- Call center-forradalom: AI alakítja át az ideges telefonálók hangját
- Folyamatosan hazudott a bitcoin állítólagos feltalálója
- Milyen routert?
- Microsoft Word topic
Ú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
- Kerékpárosok, bringások ide!
- Ventilátorok - Ház, CPU (borda, radiátor), VGA
- PlayStation 5
- Garmin Fenix 7 és 7S - profi sport megszokásból
- Háztartási gépek
- Kecskemét és környéke adok-veszek-beszélgetek
- Senua’s Saga: Hellblade II teszt
- Fotók, videók mobillal
- Politika
- A fociról könnyedén, egy baráti társaságban
- További aktív témák...
- DOBOZOS Lenovo ThinkPad T14s Gen 3:R7 PRO 6850U,32GB DDR5,2TB,vil.HU bill,Radeon680M,400nit 100%sRGB
- Ricoh Theta Z1 360 fokos kamera
- IPhone 14 128GB gyári független 2026.11.09. Apple garancia
- Gigabyte AORUS GeForce RTXTM 3070 Ti MASTER , 8GB GDDR6X, 256-bit GV- N307TAORUS M-8GD - Garancia
- iPhone 12 64Gb Fehér - Újszerű állapotban, 95%-os akkumulátor.
Állásajánlatok
Cég: Ozeki Kft.
Város: Debrecen
Cég: Alpha Laptopszerviz Kft.
Város: Pécs