Írásomban összeszedem, hogy miként is működik egy jQuery program és hogy mik a legalapvetőbb effekt utasítások, amiket használni érdemes és kell. Akik egyáltalán nincsenek tisztában a HTML kóddal és az alapvető Javascript nyelvvel, azok először ezeknek nézzenek utána, mert ahhoz, hogy az ember megértsen egy komplexebb nyelvet, jobb ha ismeri annak az alapjait. Persze azért nem kell az Assembly-vel kezdeni!

A Javascripttől eltérően a jQuery parancsok elég összetettek tudnak lenni, főleg mivel ezt a library-t azért hozták létre, hogy meggyorsítsa, megkönnyítse a webprogramozást, és hogy minél kevesebb sor megírásával lehessen létrehozni minél felhasználóbarátabb oldalakat. Minden parancs így néz ki:

$(DOM elem).valami();

• A $ jel a “jQuery” rövidítése, ez jelzi a JS számára, hogy itt most egy jQuery objektumról lesz szó. Ha mondjuk használtál már Ruby on Rails-t akkor ismerős lehet ez a fajta jelölés. Lényegében ennyi, de érdemes még tudni, hogy a $ helyettesíthető a jquery kiírásával, tehát: jquery(DOM elem).valami();
• A (DOM elem) az a HTML elem amire hivatkozol a jQuery parancsban. Ezen az elemen fog végrehajtódni a meghívott függvény
• A .valami(); a jQuery függvény, amely meghívásra kerül. Lehet ez a legegyszerűbb hide(), ami eltünteti a megnevezett elemet, vagy egy összetett AJAX hívás is.

Tulajdonképpen ez volt a legelrettentőbb rész. Érdemes tudni, hogy egy DOM elemhez több függvény is rendelhető, tehát a $(DOM elem).valami1().valami2(); is nagyon szépen fog működni; és ebben van az igazi potenciál. Most, hogy ezt megértettük nézzünk meg a legegyszerűbb függvényeket: az effekteket.

Effekt függvények

A beépített effekt függvények nagy része a következő felépítéssel működik:

$(elem).effekt([speed, callback]);

• A függvények paraméterei opcionálisak, de közülük a speed, azaz sebesség az amit legtöbbször használni kell. Meg lehet adni ezt ‘slow’, ‘normal’ és ‘fast’ értékeken túl milliszekundumban is (1000 ms = 1 másodperc). Ez lesz az az időtartam, ami alatt a függvény végrehajtódik; ez a lefutási idő.
• A callback, vagyis visszahívás paraméterben megadható, hogy mi történjen miután lefutott a függvény. Például amint véget ér az adott parancs, visszakapjuk egy alert()-ben a számolás értékeit.

Volt, nincs (show(), hide(), toggle())

Szerencsére a jQuery függvényei többsége nevében hordozza a funkcióját is, ezért ha nem is ismered a függvényt, nagyon gyorsan rá lehet jönni a működésére. Így van ez a show() és a hide() parancsoknál is: míg előbbi megjelenít egy rejtett elemet, utóbbi eltünteti a célelemét. Mindkét függvény használható speed és callback paraméterrel és nélküle, de fontos megjegyezni, hogy a sebesség paraméter nélkül csak megjelenik/eltűnik a kiválasztott DOM elem; megadásakor azonban egy kis animációt kap.

A toggle() egy kicsiben eltér a show() és hide() függvényketől, ugyanis ez tulajdonképpen a kettő kombinációja. Paramétereinek megadhatjuk a már ismert speed és callback paramétereket, de egy kifejezést is (pl. osztas++ % 2 == 0, azaz ha az “osztas” változó kettővel történő maradékos osztásának eredménye 0), amely teljesülésekor végrehajtódik az utasítás.

Lássunk is egy rövid példát. HTML kód:

Jelenítsd meg (show)
Tüntesd el (hide)
Jelenítsd meg és tüntesd el (toggle)

jQuery kód:

$('a#show').click(function() {
  $('p.pelda_1').show();
});
$('a#hide').click(function() {
  $('p.pelda_1').hide();
});
$('a#toggle').click(function() {
  $('p.pelda_1').toggle('slow');
});

A kis programunk mindössze annyit csinál, hogy a megadott linkekre való kattintáshoz  (click() függvény [erről egy későbbi postban]) rendel show, hide és toggle effekteket. Itt nézheted meg működés közben a demot. A show és hide nem kapott speed paramétert, míg a toggle-re tettem, csak azért, hogy lássátok, hogy milyen is az.

Csúszkálás (slideDown(), slideUp(), slideToggle())

A slide függvények nagyon hasonlóan működnek a show, hide függvényekhez, lényegében annyiban különböznek, hogy míg az előbbiek a speed megadásával függőleges és vízszintes irányba animálták a függvényt, a slide függvények csak függőleges irányba teszik ezt. Nem ér meg külön példát, a jQuery dokumentációban van róluk bőven leírás, példával.

Eltűnés/feltűnés (fadeIn(), fadeOut(), fadeToggle())

Eljutottunk egyik kedvencemhez: a fadeIn(), fadeOut(), fadeTo() ugyanis az a függvényhármas, amelyiket a legnagyobb előszeretettel használom. Szerintem baromi jól tud kinézni egy jó helyre rakott, szépen animálódó üzenet a usernek, főleg ha az ugyanilyen szépen be is csukódik utána. A fadeTo() a paraméterben kapott értékig csökkenti a függvény láthatóságát, míg a fadeIn() és fadeOut() a megadott sebességgel csökkenti az elem opacity CSS értékét, majd mikor ez elért a 0-hoz, rádob egy “display: none”-t, tehát eltűnteti teljesen, hogy ne foglalja a helyet. Na ez gondokat okozhat néha.

A fade effektek egyik fontos tulajdonsága, hogy míg az eddig megismert függvények folyamatosan “nyitják ki” a célobjektumot, ezzel lentebb tolva/fentebb húzva az alatta és körülötte lévő elemeket; a fade az animáció befejeztével és kezdetekor a DOM elem elfoglalja a megfelelő méretű helyét és így tűnik el(ő). Ez azt jelenti, hogy ha egy oldal közepén lévő elemet animálsz meg fade-del, akkor az animációs idő egy időpillanatában ugrani fog egyet az oldal magassága/szélessége, erre pedig figyelni kell mert zavaró lehet!

A fade-hez készített példában az eltüntetendő elem után raktam egy másikat, hogy lássátok miről beszéltem pontosan. Megoldásként vagy azt javaslom, hogy olyan elemeknél használjátok a függvényt, amik nincsenek körülvéve sok másik elemmel, vagy CSS-sel pozicionáljátok be az elemet egy felsőbb rétegre.

A központi effekt (animate() és stop())

Az összes eddig felsorolt effekt függvény visszavezethető egy központi animációs függvényre, az animate()-re. Ez az amivel mi magunk is létrehozhatunk hasonló mozgásokat a DOM elemekre, csupán egy kis CSS tudás kell hozzá. Egyszerűen az animate() paraméterei között meg kell adnunk, hogy mely CSS tulajdonságokat változtassa meg a függvényünk; például a 400px széles és magas <p> csökkenjen 200×200-ra, a láthatósága pedig legyen fele:

$('a#animald').click(function() {
  $('p.pelda_3').animate({width: "200px", height: "200px", opacity: 0.5}, 1500);
});

Itt a kipróbálható példa. Az animate() az egyik legfontosabb effekt, hiszen ezzel nagyon komplex animációkat hozhatunk létre, de vannak korlátok; a háttérképet például csak vízszintesen lehet animálni, ami kicsit idegesítő tud lenni, szerencsére azonban van erre egy plugin.

Feltűnhet, hogy a példában alkalmaztam a stop() függvényt az animate() előtt (a függvények összefűzhetőek, mint már említettem!); ez annyit csinál, hogy megállítja az éppen zajló animate()-et, így adva szabad utat a következő animáló függvénynek. A stop()-ról van egy egészen jó példa a jQuery dokumentációban.

Mára ennyi. Következő alkalommal megnézünk egy-két fontos esemény-függvényt (pl. rákattintás, fókuszba kerülő elemek) és néhány selectort (ezekkel tudunk bizonyos elemekre hivatkozni és kezelni jobban a DOM elemeket). Addig is gyakoroljatok ezekkel! Ha valami nem világos, nyugodtan kérdezzetek a hozzászólásoknál!

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

- jQuery.com

Láttátok a főoldalon a portfólióm részt? Nagyjából egy óra alatt megvolt, a nulláról. Vagy a Webidea legördülő menüit? Fél óra. Sorolhatnám az ehhez hasonló példákat, vagy írhatnék a végtelen felhasználási lehetőségről, de ezzel sokan foglalkoztak már, így inkább egy kicsit az általános működésről és a jQuery User Interface-ről, azaz a jQuery-hez fejlesztett grafikus segédkörnyezetről írnék.

A jQuery a(z egyik) leghasznosabb JavaScript fejlesztői környezet, amivel valaha dolgom volt. Ez a mondat bátran hagyhatja el számat, mert a cucc használata annyival megkönnyíti a webfejlesztési tevékenységem, mint például a Google a böngészést. Nagy szavak, de mindjárt meggyőzlek benneteket. Nagyjából egy éve használom, ez idő alatt rengeteg hasznos információt megtanultam róla: az alapvető működést, a programozást egyszerűsítő funkcióit; a “hogyan”-ra és a “hol”-ra jöttem rá. Nem állítom, hogy nincsenek még nekem is kisebb sötét foltok, de azért már elég jól eligazodom benne. Tekintsük át, hogy mit tud ez az 50 kbyte-os kis JS library.

Az első és talán legfontosabb tulajdonsága a DOM megváltozott kezelésében van. Amikor egy JavaScript alkalmazást írsz és sok HTML elemre kell hivatkozni és azokkal operálni, elég nehézkes és egy idő után átláthatatlan lesz a kód. Tegyük fel, hogy egy űrlapot kezelsz éppen és a benne lévő 3 <label> színét szeretnéd lecserélni, mert a felhasználó elfelejtette kitölteni a mezőket. Az űrlap:

Első mező:

Második mező:

Harmadik mező:

Ezt sima JS-ben így csinálod:

document.getElementById("elsomezo").style.color = 'red';
document.getElementById("masodikmezo").style.color = 'red';
document.getElementById("harmadikmezo").style.color = 'red';

Míg jQuery-ben:

$('label#elsomezo, label#masodikmezo, label#harmadikmezo').css('color', 'red');

Melyik tűnik egyszerűbb és elegánsabb megoldásnak? Innen már csak azt kell elképzelni, hogy ha egy három soros kódon ennyit tudtunk egyszerűsíteni, akkor mi lesz a 4-500 soros JS alkalmazásokkal!

A második, szintén fontos tulajdonság a beépített effektek létezése. Egy sor beírásával tűnheteted el, hozhatod elő, csukhatod be és nyithatod ki a HTML elemeket, összesen 9 beépített effekt áll rendelkezésre. Ezeken túl használható még az alap animáló függvény, amiben beállíthatod, hogy milyen módon mozogjon egy elem, például az alaphelyzetből egy elfehéredéssel csukódjon össze, miközben a betűmérete is folyamatosan csökken. Egy rövid demonstráló példa:

Kattints rám, hogy eltűntessem/előhozzam az alábbi bekezdést-t

Csukj be, nyiss ki!

A forrása pedig:

$('a.pelda').click(function(){
$('blockquote.pelda').slideToggle();
});

Ugye, hogy milyen egyszerű? Vajon mennyi idő lenne ezt megírni szimpla JavaScripttel?

A jQuery önmagában egy olyan számtalan extra tulajdonsággal rendelkező eszköz, amit minden webfejlesztőnek ismernie kéne, hogy sokkal sokszínűbb, interaktívabb és használhatóbb weboldalakat készíthessenek vele. Az 1.4-es verzió megjelenésével pedig újabb lehetőségeket adtak a kezünkbe: a változtatások dokumentációja 16 teljesen új függvényt és több tucat egyéb fejlesztést tartalmaz.

Térjünk rá a jQuery UI-re. Mint már említettem, ez a jQuery-hez fejlesztett grafikus környezet: itt jön képbe az interaktív weboldal, hiszen olyan extrákat tesz hozzá ez a kis plugin az alap programhoz, mint például a mozgatható, az átméretezhető, vagy a rendezhető sorrendű HTML elemek. Ezen felül jó néhány kis widget (dátum választó, felugró ablak kezelő, csúszka és egyebek) valamint számtalan felturbózott jQuery effekt áll rendelkezésére a fejlesztőnek.

Melyik a meggyőzőbb?

A jQuery UI hasznos kiegészítő társa a jQuery-nek, mindenképpen ajánlott egy komolyabb portál elkészítéséhez, de akár a saját weboldalon is hasznos lehet, főleg mivel a plugin letöltésénél teljesen személyre szabható, hogy melyik funkciókat szeretnénk a UI-n belül használni, így nem kell a felesleges függvények letöltésével terhelni a szervert.

A kérdés tehát nem az, hogy a webfejlesztőknek használnia kéne-e a jQuery-t, hanem az, hogy feltegyék-e mellé a jQuery UI-t is. Az 1.4-es fejlesztői környezet már annyira sokrétű és fejlett, hogy aki nem is gondolkodott el a használatán, az pont olyan, mint aki szándékosan levágja a fél karját, csak hogy megnehezítse a saját dolgát. Aki jobban el akar mélyedni a jQuery-ben, annak ajánlom a teljes dokumentációt és a különböző tutorialokat.

Szóval nekiálltam, hogy akkor megtanulom a jQuery Ajax metódusait, de szerencsére ráakadtam egy nagyon hasznos kis kerülőre. Ezt fogom most megosztani veletek.

Az első és legfontosabb dolog, hogy megértsük a <form> működését. A form – magyarul űrlap – egy olyan HTML tag, amivel egyszerű kitölthető mezőket tolhatunk a felhasználó arcába, ezzel rákényszerítve, hogy regisztrációkor megadja nekünk a haja színét és a kedvenc parfümének illatát. Ezek közé a mezők közé tartozik a fájl mező is. Az űrlap működése nagyon egyszerű, beillesztésekor megadjuk, hogy milyen módon (method), és hova (action) küldje az információkat, amiket a mezőkben megadtak a felhasználók.

A milyen módon rész POST vagy GET lehet, attól függően, hogy mennyire titkosan akarjuk küldeni az infokat. Elég másként lehet feldolgozni az adatokat, a GET ugyanis a címsorban küldi az adatokat (pl regisztracio.php?felhasznalo=jozsi&jelszo=123456), míg a POST titkosan küldi tovább, de ezért ha használni akarunk egy-két adatot további oldalakhoz, akkor azokat tovább kell vinni valahogy (PHP-nál nagyjából úgy mint ahogy a GET metódus teszi).

Az űrlap hova része a feldolgozó fájl (esetünkben egy PHP lesz), ami kezeli a megkapott adatokat és tárolja vagy továbbküldi.

A formokban betöltött fájlokkal az a baki összesen, hogy azokat PHP-ban nem $_POST és nem is $_GET, hanem $_FILES előtaggal kell feldolgoznunk, hogy jussunk valahova. Ahhoz, hogy megkapjuk a kiválasztott fájlokat, az űrlapnak meg kell adnunk még egy attribútumot, ez pedig az enctype. Az enctype igazából az elküldött adatok titkosításának módja (nem ugyanaz mint a POST/GET), a fájlok feltöltéséhez szükséges értéke pedig enctype=”multipart/form-data”.

Nézzük is akkor hogy mire lesz szükségünk. Lesz egy form, ahol kiválasztjuk a fájlt; lesz egy PHP ami feldolgozza a fájlt; és egy JavaScript ami a vizualizációért felelős. Az űrlap nem lesz túl bonyolult, lássuk csak:

  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Upload" />
  </form>

Igazából néhány extra mezőre szükségünk lesz, hogy a JS is jól működjön:

<body>
  <p id="f1_upload_process">Feltöltés folyamatban...</p>
  <p id="result"></p>
  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Feltöltés" />
  </form>
  <iframe id="upload_target" name="upload_target" src="#" style="width:0px; height:0px; border:0px;"></iframe>
</body>

Mint látjátok bekerült két <p> bekezdés és egy <iframe> belső frame, de ez utóbbi el van rejtve (width: 0px, height: 0px;). A keretre azért van szükségünk, mert ha megnézitek, az űrlapunk megkapta target attribútumnak az <iframe> nevét; magyarán oda fog betöltődni az action=”upload.php”. Ezzel le is lőttem a legnagyobb poént, amivel a fájlfeltöltés AJAX-szerűvé válik.  Egy finom kis CSS-t ráhúzunk az oldalra:

#f1_upload_process{
  z-index: 100;
  position: absolute;
  visibility: hidden;
}

Ezzel biztosítottuk, hogy a #f1_upload_process egyelőre láthatatlan legyen, mert majd a JavaScript teszi láthatóvá, a fájlfeltöltés elindításakor. Sok szó esett már a JavaScript részről, nézzük is meg, hogy mit tud. Egyelőre csak a startUpload() függvényt hívtuk meg az űrlap elküldésével. Ez a függvény igazából csak annyit tesz, hogy a már említett #f1_upload_process részt megmutatja nekünk és engedélyezi a form elküldését:

function startUpload(){
  document.getElementById('f1_upload_process').style.visibility = 'visible';
  return true;
}

A hangsúly nem is ezen a függvényen van, hanem a stopUpload()-on, ami a feltöltés eredményét fogja nekünk kiírni. Ezt a függvényt a PHP fájlból fogjuk meghívni majd.

function stopUpload(success) {
  if (success == 1){
    document.getElementById('result').innerHTML = '<span class="msg">Sikeres volt a fájlfeltöltés!</span>>';
  } else {
    document.getElementById('result').innerHTML = '<span class="emsg">Hiba történt a feltöltés során!</span>';
  }
  document.getElementById('f1_upload_process').style.visibility = 'hidden';
  return true;
}

A függvényt egy success paraméterrel együtt hívhatjuk meg, ami az eredménynek megfelelő üzenetet dob ki a <p id=”result”> bekezdésünkbe. A vizualizációval meg is volnánk, nézzük meg, hogy mi is történik a háttérben. A PHP az űrlapból megkapott fájlt egyszerűen felmásolja a gyökérkönyvtárjába, majd 1 másodperces pihenő után (hogy a nagyon kicsi fájloknál is látszódjon, hogy történik valami ) meghívja a stopUpload() JS függvényt.

<?php
  $destination_path = getcwd().DIRECTORY_SEPARATOR;
  $result = 0;
  $target_path = $destination_path . basename( $_FILES['myfile']['name']);
  if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
    $result = 1;
  }
  sleep(1);

  echo('<script language="javascript" type="text/javascript">
    window.top.window.stopUpload(' . $result . ');
  </script> ');

?>

Ezzel tulajdonképpen meg is volnánk. A dolog működik szépen, én is használom, használjátok ti is egészséggel! Ha bármilyen kérdés vagy észrevétel van, jöhet fórumba!

Forrás: ajaxf1.com