Jquery. Konstantinusz Kft.

Átírás

1 Konstantinusz Kft. 2011

2 1 Tartalomjegyzék 1 Tartalomjegyzék Bevezetés Használata A $ függvény Elemek kiválasztása Fontosabb függvények Animációk AJAX Előnyök hátrányok Előnyök Hátrányok Összefoglalás / 13

3 2 Bevezetés Mi a Jquery? Egy Javascriptben (A Javascript nem azonos a JAVA-val, sőt nem sok közös vonás található ) írt függvény gyűjtemény, ami megkönnyíti a fejlesztő dolgát. A szlogenje Write less do more. vagyis írj kevesebbet, csinálj többet. Ez nagyon jól kifejezi, hogy miért alkották meg és mire használható. Mire használható? A leglátványosabb funkciói a megjelenítési funkciók. Ezeken a Web 2.0 -nak nevezett oldalakon előforduló megjelenési trükköket kell érteni. Ilyenek pl.: az előugró üzenet ablakok, amik valójában nem új böngésző ablakok, csak viselkedésben hasonlítanak rájuk. A másik fontos felhasználása, az AJAX támogatása, vagyis képes különböző kéréseket küldeni, a webkiszolgálónak a teljes oldal újratöltése nélkül. A Jquery használatához alapszintű HTML és CSS ismeret szükséges hiszen ezek manipulálására szolgál. Ha nem értjük, azokat a dolgokat amik manipulálására szolgál, akkor nem fogjuk megérteni a lényegét. 3 / 13

4 3 Használata Az oldalba elhelyezzük a <head> részbe a javascript betöltését, és már használhatjuk is az adott oldalon. <script src="jquery-1.5.min.js" type="text/javascript" language="javascript"></script> 3.1 A $ függvény A Jquery úgy épül fel, hogy kiválasztunk elemeket és azokra hívunk meg függvényeket. Az eseményhez kötés is úgy történik, hogy megívunk egy függvényt, aminek átadjuk, hogy majd mondjuk kattintásra mit csináljon az adott elem. A legtöbb javascript függvénytár (pl.: prototype, mootools) ezt választotta alap függvényének, ha ezekkel együtt akarjuk használni a Jquery-t akkor egy kompatibilitási beállítást el kell végezni. var $j = jquery.noconflict(); Innentől a $ helyett $j-t használhatunk. Az adatbási egy példányát a következő paranccsal kérhetjük le: $db=jfactory::getdb(); ezek után a $db->setquery([sql kód]); $db->loadassoclist(); Függvényekkel gyakorlatilag bármit meg lehet valósítani, írhatunk saját model-t, ami megvalósítja a rendszerünknek szükséges funkciókat. 4 / 13

5 3.2 Elemek kiválasztása A Jquery-vel nagyon összetett kiválasztást lehet használni. Ez a kiválasztás szintaktikájában a CSS-re hasonlít. Ha id alapján akarunk egy elemet kiválasztani akkor a # et kell használnunk. Ha osztály alapján akkor a. -ot. Ha tag neve alapján akarunk kiválasztani akkor csak a nevét kell írni. A kiválasztó (a $ függvény) visszaad egy objektumot és ezen hívhatunk függvényeket, valamint láncban is kiadhatunk utasításokat. pl.: $( #id ).css('display','inline').fadeout(1000); Példák: Az oldalon található összes <li> elem kiválasztása: $( li ) Az összes del id -ű elem kiválasztása: $( #del ) Az összes gomb class -ú elem kiválasztása: $(.gomb ) És természetesen keverhető. A menü id -ű <ul>-en belüli összes <li> elem, amelynek aktiv a class paramétere: $(.menu li.active ) 5 / 13

6 3.3 Fontosabb függvények Az esettanulmányban eltekintek az összes függvény ismertetésétől, csupán a Jquery működésének elvét, és a fontosabb függvényeket ismertetem. Az összes függvény leírása megtalálható: A fontosabb függvényeket példa segítségével mutatom be. Azokat a függvényeket választottam ide amelyek a leggyakrabban fordulnak elő, web 2.0-ás alkalmazás készítésénél. A legtöbb animációt tartalmazó függvénynek átadhatjuk, hogy milyen sebessége legyen az animációnak. Ha elhagyjuk akkor az alapértelmezett sebességgel történik az animáció. A sebesség ezred másodpercben értendő, vagyis 400 az 0.4 másodperc lesz az animáció teljes hossza..click() $("#gomb").click(function(){... ); Ezzel a függvénnyel köthetünk egy elemhez kattintást eseményt. A kattintás esemény hatására lefuttatandó függvényt helyben is definiálhatjuk ahogy a példában is látható. 6 / 13

7 3.3.1 Animációk.animate() Paraméterként át kell adni, hogy milyen CSS tulajdonságokat animáljon, és a sebességet. $("#gomb").click(function(){ $("#elem").animate({ width: "70%", fontsize: "13px",, 2000); ); A fenti függvény hozzá köti a gomb id -vel rendelkező elemekhez, hogyha rákattintanak, akkor a szélességet növelje 70%-ra, és a betűméretet 13px-re..hide() és show(), és toggle() paraméterként meg lehet nekik adni sebességet. $('#elem').hide(); Animáltan eltünteti az adott elemet. $('#elem').show(); Megjeleníti az elemet például amit hide()-val eltüntettünk. $("#elem").toggle(); Ez a kettő keveréke, ha látszik az elem elrejti, ha nem akkor megjeleníti. Több függvénynek van toggle változata, ezeket érdemes használni, és akkor nem nekünk kell mindig megvizsgálni, hogy éppen látszik-e vagy nem az adott elem..fade() és.fadetoggle() Elhalványítással tünteti el az elemet, hasznos lehet hibaüzenet dobozoknál, illetve bármikor amikor ablak jellegű viselkedést akarunk adni egy elemnek. $("#elem").fadetoggle(); Itt is hasznos a toggle változat használata, ha újra meg akarjuk jeleníteni az eltüntetett elemet.. 7 / 13

8 3.3.2 AJAX Az AJAX (Asynchronous JavaScript and XML) mint a neve is mutatja aszinkron lekéréseket lehet vele végezni. Hagyományos módon általában kell egy AJAX objektumot létrehoznunk, és utána írhatjuk a lekéréseinket. Javascriptben ez úgy történik, hogy kiadjuk a lekérést és megadunk egy függvényt ami lefut, amikor a lekérés megtörtént. Itt lehet reagálni a válaszra, vagy annak állapotára, például arra, hogy nem sikerült a lekérés. Vagy a választ egyszerűen betölthetjük mint HTML egy adott elembe (Ez a leggyakoribb felhasználási mód, ezért a példákban is ez szerepel). Az objektum létrehozása, ami több böngésző alatt is működik, valamint van benne egy figyelmeztetés arra az esetre ha esetleg az adott böngésző nem támogatja az AJAX lekéréseket: var xmlhttp; try { // Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequest(); catch (e) { // Internet Explorer try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 8 / 13

9 catch (e) { alert("your browser does not support AJAX!"); És egy lekérés elküldése: xmlhttp.open("get", ajax/test.html, true); xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded"); xmlhttp.setrequestheader("content-length", params.length); xmlhttp.setrequestheader("connection", "close"); xmlhttp.onreadystatechange=function() { if(xmlhttp.readystate == 4) { try{ var result = xmlhttp.responsetext; document.getelementbyid('response').innerhtml=(result); catch(e){ Ezzel szemben jquery-vel nem kell objektum létrehozással bajlódni és csak a lekérést kell használnunk: $.ajax({ url: 'ajax/test.html', success: function(data) { $('#response').html(data); ); 9 / 13

10 4 Előnyök hátrányok Ebben a fejezetben ismertetem, hogy mik szólnak amellett, hogy használjuk a jquery-t és mik amellett, hogy ne használjuk, vagy csak mértékkel. 4.1 Előnyök Rövid átlátható Javascript kód készíthető vele. Példa: document.getelementbyid( id ).innerhtml= új tartalom ; helyett elegendő $( #id ).html( új tartalom ); Kompatibilis a legtöbb böngészővel: Egykód használható több böngészőben is, nem kell böngészőnként külön kódot írni. Példa: htmlkód: <div id= id ></div> <input type= hidden name= id value= 25 /> Javascript kód: var x=document.getelementbyid( #id ); Ez általában minden böngészőben működik, kivétel IE6, ahol az a gond, hogy az x változó nem a div hanem az input típusu mezővel lesz egyenlő. Ez azért van mert az Internet Explorer 6-os nál, egy HTML elem név és id tagje az ugyanaz ezért a document.getelementbyname() és a document.getelementbyid() függvények gyakorlatilag ugyanazt csinálják. 10 / 13

11 Nem egyszerűen csak annyit csinál amennyi szükséges, hanem általában animációkon keresztül. Példa: Javascript: document.getelementbyid( id ).style.display = 'none'; Ez egyszerűen eltünteti az adott elemet. Azonban a jquery eltüntető függvénye az animáltan tünteti el. Ez nagyon fel tud dobni egy szerű oldalt. Ahelyett, hogy a hibaüzenetet tartalmazó html elem egyszerűen eltűnne, animáltan egyre kisseb lesz majd a végén eltűnik. Jquery: $( id ).hide(); Egyszerűsített eseménykezelés. Példa: Általában a törlés gombokra célszerű, megerősítést, rakni. Ez hagyományosan úgy működik, hogy minden gombot kiegészítünk ezzel: onclick= return confirm( Biztosan törli? ) Ezzel az a probléma, hogy ha egy listában vannak a törölhető elemek (például egy képgaléria esetén) akkor ezt a kódot minden gomb esetén ki kell raknunk. Ami ha nagy az oldal nagyon meglassíthatja a betöltését. Jqueryvel megoldaható az alábbi módon: $(document).ready(function(){ $("#del").click(function () { return confirm('biztosan törli?'); ); ); Ekkor csak annyi dolgunk van, hogy minden törlés gombnak adunk egy id= del paramétert. 11 / 13

12 4.2 Hátrányok Hátránya között azt lehet megemlíteni, hogy az animációk sokasága nagyon le tud terhelni egy gépet. Különösen igaz ez a régebbi böngészőt (mint amilyen az Internet Explorer 6-os) futtató, szerényebb teljesítményű gépekre. E miatt körültekintően bánjunk a használatával teszteljük más gépeken is. Lehet, hogy ami nálunk szép animáció más gépeken úgy néz ki mintha ugrálna, vagy nagyon lassú és ez használhatatlanná teszi az oldalt. 12 / 13

13 5 Összefoglalás Mint láthattuk a Jquery egy sok oldalú, Javascript függvény könyvtár. Leggyakoribb felhasználása az animációk és ezáltal felületek kialakítása. Ennek ellenére ezen kívül is támogat más javascript megoldásokat. Számos bővítménnyel (Plugin) rendelkezik. Ezek között szerepelnek olyanok, amelyek még inkább megkönnyítik különböző összetett felületek kialakítását. Tapasztalataim szerint használata könnyen elsajátítható. Segítségével az asztali alkalmazásokhoz hasonló viselkedést is elérhetünk. Például ablakok kezelése, amelyek az asztali alkalmazásokhoz hasonlóan mozgathatók, minimalizálhatók, átméretezhetőek. Valamint megkönnyíti az AJAX használatát is, aminek köszönhetően alkalmazásunk gyorsabb és látványosabb lehet hiszen nem kell minden alkalommal újratölteni az egész oldalt, elég csak a megfelelő részeket. Ez általában webshopnál termék kosárba rakásánál lehet látványos, hiszen újratöltés nélkül lehet a kosár ár összegét frissíteni. 13 / 13