HTML

Bevezetés röviden...

Nyilván felesleges azt ecsetelgetni, hogy mi is az a jQuery, mivel tartom valószínűnek, hogy találkoztál már vele és azért vagy itt, mert szeretnél jobban elmélyülni a témában. Annyi biztos, hogy egy nagyon hatékony kis eszköz, ami  - ha komolyabb szinten űzöd a JavaScript kódok írogatását - igen nagy mértékben csökkenteni tudja a "baszdmeg"-ek számát :) Lényegében ez egy függvénykönyvtár (vagy keretrendszer), ami rengeteg hatékonyan megírt megoldást biztosít a gyakori problémáinkra, minden böngészőhöz alkalmazkodva amennyire csak lehet (természetesen, ha a látogató böngészőjében nem engedélyezett a szkriptek futtatása, akkor alkalmatlan, de ez úgyis csak elhanyagolható százalékban fordul elő).

Annyira nem ástam bele magam a témába, hogy tudjam, mik a főbb motivációk a használatával kapcsolatban, annyi biztos, hogy nagy hangsúly  fekszik azon, hogy weboldalunk megjelenését stílusosabbá, dinamikusabbá varázsolhassuk, és mindezt sokkal könnyebben és hatékonyabban, mint azelőtt. Ha egyéb infók érdekelnek a történetével, fejlődésével kapcsolatban, közös barátunk, Mr.Google biztosan segít neked :)

Ha jól sejtem, te is használtál már párat a neten található kreatív és ötletes jQuery plugin-ok közül. Szerintem mindenki ezekkel kezdi, mivel nagyon feelingesek tudnak lenni és pik-pak be is ágyazhatóak a kódunkba. A probléma, hogy egy idő után megelégeljük őket: ha szilárd elképzeléseink vannak a kialakítással kapcsolatban, nehéz olyat találni, ami pont azoknak megfelel. Ha komolyabban érdekelt vagy a témában, el fog jönni az idő, amikor már saját plugin-okkal akarod felruházni az oldalad, amik pontosan azt művelik, amit TE akarsz. Na, ezen az úton foglak én most elindítani téged.

Egy rövidke példa

Mutatok egy egyszerű kis példát arra, hogy miért teszi könnyebbé az életünket és kímél meg minket több tucat
őszhajszál kitépésétől, mint ha csupasz natúr javaScript-et alkalmaznánk. Tegyük fel, hogy van a weboldalamon egy láthatatlan DIV elem, és a megnyerő hatás kedvéért azt szeretném, hogy adott idő lefutása alatt szépen fokozatosan tűnjön elő.

<div id="box" style="background:red;width:200px;height:200px;
display:none;"
>
</div>

Adott tehát a HTML kódomban egy "box" azonosítóval ellátott elemem, ami most egyenlőre láthatatlan (display:none), de majd pirosan fog virítani, ha láthatóvá teszem. Akkor most jöhet a szkriptemnek a megírása.

function fadeIn(elem,time){
    var step=1/time;
    var op=0;
    
    elem.style.opacity=op;
    elem.style.filter='alpha(opacity='+op+')'; //I.Explorer
    elem.style.display='block';
    
    function run(){
        setTimeout(
            function(){
                op+=step;
                time--;
                elem.style.opacity=op;
                
elem.style.filter='alpha(opacity='
               
+Math.floor(op*100)+ ')';

                if(time>=0)run();
            },1
        );
    }
    run();
}
var object=document.getElementById('box');
fadeIn(object,500);

Nos, egy ilyesmi kódot kell írnunk ahhoz, hogy eme egyszerű kis effektus megjelenjen az oldalunkon. Ráadásul nem tudni, hogy ez mennyire jól optimalizált a különböző böngészőkre, és az időzítési mechanizmus sem biztos, hogy tökéletes. Ja és azt még elfelejtettem: nincs az az Isten, hogy pár pofás kis hatás miatt ilyeneket irogassak egész nap!!! Előbb kötöm fel magam...
Na jó, most töröljük ki emlékeinkből ezt a szkriptet, mintha nem is olvastuk volna. Próbáljuk meg most ugyanezt jQuery-ben:

$('#box').fadeIn(500);

Ne keresd a folytatást... ennyi! Ez a teljes kód. Picivel rövidebb, nem? És a nyakamat rá, hogy optimálisabban is működik. Egy rakat jól megírt függvényt tartalmaz ez a kis csomag.

Ha máris ki szeretnéd próbálni azt a kis "parancsot", a jQuery használatához be kell linkelned a függvénykönyvtárt az oldaladba. Ezt teheted úgy, hogy letöltesz egy verziót, beteszed valahova a weboldalad könyvtárába és onnan ágyazod be, vagy egy külső helyről (ahol tuti mindig megtalálható az a fájl) hivatkozod meg. A jQuery honlapján egy fájlban mindig megtalálható a legfrissebb verzió, véleményem szerint ezt a legcélszerűbb alkalmazni. Tehát a HTML kódod még egy ilyennel kell kiegészítened:

<script src="http://code.jquery.com/jquery-latest.js">
</script>

Innentől már működni is fognak a jQuery-t használó programjaid is. Próbáld ki a fenti példát (ha elég elszánt vagy, letesztelheted a hosszú JavaScript függvényt is) és ha meggyőzött a jQuery-ben lakozó erő, akkor máris belevághatunk a lecsóba ;)

Ha ki akarod próbálni, akár le is töltheted a fenti kódot itt: KLIKK

Szólj hozzá: