2. Fórumok
  3. Szoftverfejlesztés
  4. Weblap készítés
  5. (kiemelt téma)
Keresés

Új hozzászólás Aktív témák

  • #12042 martonx veterán indigo #12041
    Új Válasz #12042
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    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!

  • #12045 Sk8erPeter nagyúr indigo #12041
    Új Válasz #12045
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    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=preview

    Jó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