jQuery .data() és a FireQuery

Szerző: Gergő | Amiket használok ,JQuery | 2010 August 25. 01:02

Vannak esetek amikor egyes elemek állapotait tárolni szeretnénk valahogyan, például Márkus oldalán mikor egy betüs kép fölé húztuk az egeret akkor meg kellett jegyeznünk, hogy a kép átfordult. Én egy class hozzáfűzésével oldottam meg, de erre egy sokkal jobb megoldás a jQuery .data() metódusa.

Mi is ez pontosan?

A DOM bármelyik eleméhez kulcs – érték párokat fűzhetünk hozzá a következő módon:

1.
2.
3.

$('#elem').data('kulcs', 'érték');
$('body').data('alma', 'piros');
$('#header').data('latogatok', 120);

Ezeket az értékeket később bármikor lekérhetjük:

1.
2.
3.
4.
5.

alert( $('#elem').data('kulcs') );
$('#ide_iratjuk_ki').html( $('body').data('alma') );
 
//lekérhetjük így is
$('#header').data();

Miért jó?

Ha classal meg tudtuk oldani, akkor minek valami új dolgot használni hozzá? Mert egyrészt sokkal összetettebb dolgokra is alkalmas, másrészt pedig az avatatlan szemnek elsőre boszorkányságnak tűnik, és nagyobb lesz a respect.

Összetettebbnek számít például, hogy nem csak sima kulcs érték párokat tudunk tárolni, hanem objektumokat is. Így a következőt tehetjük meg:

1.
2.
3.
4.

$('body').data('sima_kulcs', 67);
$('body').data('objektum_kulcs', { ember: 'férfi', iq: 140 });
//igy a body elemen lévő adatok a következők:
//{sima_kulcs: 67, objektum_kulcs: { ember: 'férfi', iq: 140 }};

Ha ezek láttán nem csillan fel a szemed, és nem látod értelmét használni, akkor itt egy példa és egy ok anélkül, hogy komolyabban elgondolkodnék:

Például akkor hasznos, ha táblázatos formában iratod ki az alkalmazottak nevét, majd a táblázat tetejére teszel egy ABC-t aminek a betüire kattintva csak az azzal kezdődő dolgozók jelennek meg. Vagy minden alkalommal levagdosod az első betüket és az alapján szűrsz, vagy a data() segítségével egyszer hozzájuk rendeled, és onnantól azt használod. De tárolhatod akár a fizetésüket is, vagy akármit, amit nem akarsz megjeleníteni mert zavarná a kilátást, viszont kell a rendezéshez és szűréshez.

Az ok a használatra, hogy ha például a class tulajdonságban tároljuk egy elem állapotát, akkor az kizárja legtöbb esetben, hogy azt a classt felhasználjuk formázásra. A data nem zavar be senkinek, elvan a saját világában.

Debugolás

Írtam, hogy az avatatlan szem számára ez boszorkányság, mert az adatok láthatólag a semmiből jönnek. Akkor hogyan tudjuk, hogy egy elemre milyen adatokat fűztünk eddig?

FireQuery

A FireQuery lesz a mi pluginünk, amit a Firebug telepítése után tudunk feltenni. Aki nem használt még Firebugot, annak mindenképpen ajánlom! Jó videó található róla itt, érdemes megnézni.

A használatukat el lehet lesni a videóból, kipróbálni pedig a következő elemen lehet:

Ennek az elemnek >> << ez az értéke.

A képen látható működés közben, a felcsúsztatott kép megkapta a fent=true értéket, de ezt csak mi látjuk akiknek van FireQuery-jük.

Ami nagyon tetszett még benne, az a jQueryfy, ami bármilyen oldalon azonnal használhatóvá teszi a jQuery 1.4-et a konzol segítségével. Zsivány egy dolog.

Pacher.hu

A fotós oldal amit le lehetett tölteni, a képek átfordításakor egy ‘fent’ classt adott az elemekhez, így következő alkalommal ha fölé húztam az egeret, tudta a javascript, hogy le kell fordítani.

A kód data() használatával a következő képpen nézne ki:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

$('.betus img').bind('mouseover', function(){
    if($(this).data('fent')){
        $(this).animate({
            top: '+=100px'
        });
        $(this).data('fent', false);
    }else{
        $(this).animate({
            top: '-=100px'
        });
        $(this).data('fent', true);
    }
})

Így már nem szemeteli össze a kódot osztályokkal, szerintem sokkal szebb.

Összegzés

Kliens oldali programozáskor elengedhetetlen a debugolás, és ezekhez érdemes az említett két plugint használni. Ha valakinek van még javaslata, szívesen várom.

Kapcsolódó cikkek

Hozzászólások