HTML

Saját jQuery-plugin készítése

Most végre elérkezett az idő: megalkothatjuk első saját könnyen beágyazható jQuery-pluginunkat. Gondolom, mind használtunk már többfélét is az oldalainkban. Általánosítva valahogy így néz ki a folyamat: belinkeljük az odalunkba a "jquery" szkriptet, a "js" fájlt, ami a plugin kódját tartalmazza, majd definiáljuk azt egy - az oldalunkon megtalálható - elemre. Tehát valami ilyesmit kell beírnunk:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/myplugin.js"></script>
<script> 
    $(document).ready(function(){
        $('#box').myPlugin();
    });
</script>

Ez azért jó, mert csak egy rövidke szkript beillesztését igényli, és bárhova beilleszthető, majd azonnal használható is. És ha már itt tartunk, jöjjön egy újabb fontos javaslat... A szkriptek futása kudarcba fulladhat olyan esetben, ha például a szóban forgó elemek még nem kerültek betöltésre az oldalon, ezért érdemes a "document" objektum "ready" eseményében elhelyezni azokat (ez akkor következik be, ha az oldal betöltődött és készen áll a használatra). A fenti kódrészlet tehát a "jquery" után betölti a "myPlugin" nevezetű programocska fájlját, majd ha a dokumentum készen áll, közli a jQuery-vel, hogy a "box" azonosítóval ellátott elemre gyakoroljon hatást a "myPlugin" néven elkeresztelt függvény.

Akkor lássuk, milyen kódnak kell szerepelnie abban a "myplugin.js" fájlban, hogy ez működjön. A plugin gyakorlatilag egy új jQuery-függvény definiálásaként testesül meg... ohh, ezt a csodaszép megfogalmazást :D

(function($){
    $.fn.myPlugin = function() {
        //ide jön a plugin kódja
    };
})(jQuery);

Ezt a kifejezést kell leírnunk így, ahogy van, csak ugye a "myPlugin" szó helyett a sajátunk elnevezését :D értelemszerűen. A biztonság kedvéért jobb, ha erre is felhívom a figyelmet: ha egy külön "js" fájlban el kezded írni a szkriptet, és figyelemmel kíséred a változásokat a weblapon, ne felejtsd el, hogy egyes böngészőbeállítások esetében nem frissül mindig újra a külső JavaScript fájl tartalma (tehát megeshet, hogy nem észlelsz változást)!

Amiről eddig még szintén nem esett szó: egy adott objektumra gyakorolt bármilyen jQuery-függvényen belüli metódus írásakor az aktuális elemre a $(this) kifejezéssel hivatkozhatunk. Ez érvényes például a "box" id-jű elemre végrehajtott "fadeIn" függvény "complete" metódusán belül (ahol ez a "this" a "box" elemet fogja jelenteni), és érvényes a plugin függvényén belül is.

$.fn.myPlugin = function() {
    $(this).css('background','black');
};

Ebben a példában tehát azt mondjuk, hogy a kiválasztott elem háttere legyen fekete. Így, ha a $('#box').myPlugin(); definíciót írjuk, akkor ez azt eredményezi, hogy a "box" objektumunk lesz fekete. Ilyen egyszerű a dolog :)

Felmerül a kérdés: mi van akkor ha olyan plugin-t akarunk írni, mely különböző beállítási opciókkal vezérelhető. Akkor ugye a definíció a HTML oldalunkban valami ilyesmi lenne:

$('#box').myPlugin({w:200,h:100});

Mondjuk olvastuk a plugin dokumentációját, ahol azt láttuk, hogy bemenő opciókkal változtatható a magassága és szélessége, mégpedig "w" és "h" nevű tulajdonságok megadásával. Ekkor ennyiben változik a történet:

$.fn.myPlugin = function(ops) {
    $(this).css('width',ops.w+'px');
    $(this).css('height',ops.h+'px');
};

Annyiban változott a "myPlugin" függvényem meghatározása, hogy a "function" kulcsszó utáni zárójelben megadtam egy "ops" nevű bemenő paramétert. Ez egy objektum lesz, tulajdonságokkal és azok értékeivel. Tehát a fenti esetben ez az "ops" két tulajdonságot fog kapni: a "w"-t (aminak értéke 2009, és a "h"-t (értéke 100). Ilyen objektum elemeire pedig úgy hivatkozunk, hogy leírjuk az objektum nevét, majd egy pont után a tulajdonság nevét. Ezek akkor már könnyen alkalmazhatóak a következő sorokban, a "this" elem CSS-tulajdonságaiból a szélességet "ops.w" pixelre, a magasságot pedig "ops.h" pixelre állítjuk.

Akkor ezekhez még egy kis apróság... mi van, ha a "myPlugin" beillesztésekor nem adok meg bemenő opciókat, vagy esetleg csak az egyiket adom meg? Mondjuk van három "div" elemem "box1", "box2", és "box3" azonosítóval és ezeket írom:

$('#box1').myPlugin();
$('#box2').myPlugin({h:300});
$('#box3').myPlugin({w:200,h:100});

Az első kettő elbukik a teszten. A harmadik működne, de ő sem fog, mert a szkript lefullad. Az ilyen esetek miatt javasolt minden ilyen jQuery függvényhez alapértelmezett értékeket megadni, amiket akkor használunk, ha a felhasználó nem adott meg semmit. Legyen mondjuk a "w" és "h" alapértelmezett értéke 50...

var defOps = {w:50,h:50};
ops = $.extend({},defOps,ops);

Egy lehetséges megoldás: létrehoztam egy "defOps" nevezetű változót, ami egy "w" és "h" tulajdonságokkal rendelkező objektum, ezeknek pedig az értékük egyaránt 50. Ezután pedig az "ops" bemenő változót felülírom egy új objektummal, amit az "extend" nevű jQuery-függvény fog legyártani nekem a "defOps" és a még eredeti "ops" objektumokból. Elég annyit tudni erről az "extend"-ről, hogy a megadott két objektumot egyesíteni fogja, tehát az általa létrehozott objektumban már a "defOps" és az "ops" elemei is szerepelni fognak, de úgy, hogy ugyanazon tulajdonságok esetében az utóbbiban (ami jelen esetben az "ops") szereplő értékek felülírják az elsőben levőket. Akkor tehát mi is zajlik? Az "extend" fogja a "defOps" minden elemét.. azaz a "w:50" és a "h:50" értékeket... ha az "ops" üres, akkor maradnak ezek és kész... ha az "ops"-ban szerepel mondjuk egy "h:300", akkor a "h" értéke változik, a "w" 50 marad továbbra is... ha pedig "w" is szerepel az "ops"-ban, akkor az is megváltozik. Így akkor lesznek alapértelmezett értékeink arra az esetre, ha nem adunk meg bemenő opciókat. Remélem, eléggé érthető volt :D Jelen esetben tehát a méretezést végrehajtó kis plugin-unk így néz ki teljes egészében:

(function($){
    $.fn.myPlugin = function(ops) {
        var defOps = {w:50,h:50};
        ops = $.extend({},defOps,ops);

        $(this).css('width',ops.w+'px');
        $(this).css('height',ops.h+'px');
    };
})(jQuery);

Ezze kész is az első jQuery-pluginunk, ami kissé gagyi, mivel csak méreteket változtat, de a lényeg, hogy már tisztában vagyunk magával a módszerrel :) Mellékelek egy kis kódot, amiben három "div"-et méretezünk ezzel a függvénnyel, opciókkal is, meg azok nélkül is (mivel ez a "plugin" még elég rövid, nem írtam külön fájlba). Ha szeretnéd kicsit átnyálazni, töltsd le itt: KLIKK

Szólj hozzá: