HTML

Gyakorlat: új plugin (menü), opciók, animate

Most pedig elkészítjük az első jQuery-pluginunkat, ami már azért érni is fog valamit. Így első körben még valami rövidre gondoltam, ami ettől még hasznos és látványos is. Ez a plugin egy natúr HTML-lista (felsorolás) segítségével alkotott menüt fog kissé feljavítani. Akkor ne is szarozzunk... vágjunk bele!

<ul id="mymenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Ez egy teljesen alap, formázatlan "ul" lista, benne "li" elemekkel, amelyekben a linkek csücsülnek. A példa kedvéért még CSS-stílust sem adunk meg neki, azt is a jQuery fogja elvégezni... A program most már külön fájlban lesz eltárolva, hogy akkor már igazán stílusosan nyomjuk a témát. Akkor a HTML leírásunk - azon kívül,   hogy kialakítjuk a környezet felépítését és persze behívjuk a jQuery-t is - még fűszerezve lesz ehhez hasonlókkal:

<script src="js/myplugin.js"></script>
<script>
    $(document).ready(function(){
        $('#mymenu').myPlugin();
    });
</script>

Tehát ha kész a plugin leírása a "myplugin.js" fájlunkban, akkor ez a kis definíció egy frankó kis menüt fog készíteni a gagyi link-felsorolásunkból. Mit fog csinálni...? Először is eltüntetjük a felsorolásjeleket, aztán a "li" tagokat nem egymás alá, hanem egymás mellé helyezzük, állítunk térközöket, stb... a menüpontok háttérszínét belőjjük fehérre, a betűszínt pedig feketére. Aztán... ha a menüpont fölé visszük az egeret, egy gyors klassz kis átmenettel a színek felcserélődnek. Nem egy nagy durranás, de határozottan feldobja a feelinget. Aztán, hogy teljes legyen a dolog: lehetőséget adunk a felhasználónak, hogy megadhasson két bármilyen színt a háttérnek és a szövegnek is. Lássuk akkor, mi kerül a "JS" fájlba...

A plugin megírása...

Most azért találkozunk egy kissé spécibb esettel a többihez képest: az "animate" effekt alapjáraton nincs felkészítve a színekkel történő buherálásra, így ahhoz be kell hívnunk a programba egy kiegészítést is, amit a jQueryUI fog jelenteni nekünk (később még jobban bele is megyünk, hogy milyen egyéb dolgokkal is gazdagít minket ez). Innen le is szedhetitek akár: http://code.jquery.com/ui/1.10.0/jquery-ui.js. Aztán ezt az állományt vagy meghívjátok a HTML-ben még pluszban, vagy a pluginunk forrásában hivatkozunk rá. Én az utóbbit választottam. Egy külső szkript behívása jQuery-ben:

$.getScript("http://code.jquery.com/ui/1.10.0/jquery-ui.js");

Akkor jöhet a már ismert - új függvény létrehozásához szükséges - "keret", ami létrehozza a "myPlugin" nevű jQuery-függvényt. Tegyük bele már az opciókat is: "color1" legyen a szöveg, "color2" pedig a háttér színe, alapértelmezésként pedig a háttér legyen fehér, a szöveg fekete.

(function($){
    $.fn.myPlugin = function(ops) {
        var defOps = {color1:'black',color2:'white'};
        ops = $.extend({},defOps,ops);
    };
})(jQuery);

És elméletileg ebben a kódban mindenkinek tök nyilvánvaló, hogy mi mit jelent :) ha nem... akkor nem lesz hátrány még egyszer átrágni az előző bejegyzést.

Összekapcsolás és find() függvény

Akkor most beállítjuk az elemek stílusát a "css" függvény segítségével, ami már szintén régóta nem újdonság a számunkra. Viszont van valami, amiről még nem esett szó, és valószínűleg eddig nem is lehetett egyértelmű feltételezni, hogy működik... a jQuery függvényei egy adott szelektált elemre vonatkozóan a kívánt végrehajtás sorrendjében összefűzhetők... Nyugi, kifejtem érthetőbben is :D Szóval...

$('#elem').css('background','black');
$('#elem').css('color','white');

Itt a példában az "elem" azonosítójú objektumot választjuk ki, majd a "css" függvény alkalmazásával a háttérszínét feketévé változtatjuk. Ezután egy újabb kijelöléssel szintén az "elem" elemet kényszerítjük változásra, ahol a betűszínét cseréljük fehérre. Ugyanezen hatás eléréséhez írhatjuk egyszerűen ezt is:

$('#elem').css('background','black').css('color','white');

Itt kiválasztjuk az "elem"-et, végrehajtjuk rajta az első stílus-változtatást, majd egy ponttal hozzácsatoljuk a következő függvényt és ez mehet akármeddig, amíg még mindig az "elem" a kijelölt objektum. Na mielőtt tovább lépek, itt az ideje, hogy feldobjam a "find" függvényt is, mert szerintem elég sokszor alkalmazni fogjátok. Ennek pusztán annyi a lényege, hogy a már szelektált elemünkön belül további elemekre keresünk rá és jelüljük ki azokat. Például:

$('#elem').find('a').fadeIn();

Ez a fenti kis példa annyit jelent, hogy a kijelölt "elem" id-jű objektumban keressük fel az "a" linkeket és azokat egy "fadeIn" hatással varázsoljuk elő. Igazából ennyi a "find" lényege :) most már ezt is tudjátok...

És visszakanyarodva a fenti összefűzési példa gondolatmenetéhez... ugyanígy akár hozzácsatolhatunk egy .find('a') kifejezést is, ami ugye az aktuálisan kijelölt elemünkön (ami ugye az "elem" volt, ha elfelejtettük volna) belüli "a" tagokat keresi meg, hogy azokon hajtson végre további változtatásokat, de fontos emlékezni arra, hogy ez már egy újabb kiválasztást jelent, tehát a további hozzácsatolt függvények már ezekre az "a" tag-ekre vonatkoznak! Na, akkor most a példák után lássuk, miként formázza meg a plugin az elemeket:

$(this).css('list-style','none').find('li').css('float','left')
.find('a').css('background',ops.color2).css('padding','20px')
.css('text-decoration','none').css('color',ops.color1);

Szép kis összefűzés, mi? :D És bizony működképes. A biztonság kedvéért rágjuk át magunkat rajta... Ugye az a terv, hogy egy "ul" listából alkotott menürendszert alakít át a program és erre az "ul"-re fogjuk majd "ráhúzni a plugin-t. Akkor tehát a $(this) ezt az "ul" elemet fogja jelenteni a függvényünkben. Annyit változtatunk ennek a stílusán, hogy kivesszük a felsorolásjeleket a "list-style" tulajdonság buherálásával. Ezt követően felkutatjuk a benne található "li" elemeket... és innentől kezdve a további függvény már ezekre fog hatni. A "float" értékét "left"-re állítva a "li" tagok szépen egymás mellé kerülnek. Most pedig ezeken a "li" elemeken belüli "a" tagokra irányítjuk a reflektorfényt. Minden "a" link háttere az opciókban megadott "color2" változóban eltárolt színt kapja. Majd a linkek "padding" értékét 20 pixelesre állítjuk, hogy legyen kis távolság a szövegük és a széleik között, a "text-decoration" módosításával eltüntetjük a linkek alapértelmezett aláhúzását is, és végül a "color" tulajdonsággal a szöveg színét az opciók közötti "color1" színnel tesszük egyenlővé. Ilyen egyszerű :)

Akkor már csak a lényeg...

És... akkor már a csak a lényeg van hátra, maga a használat közbeni működés... tehát: ha egy menüpont fölé visszük az egeret szépen átváltanak a színek, majd ha elvisszük onnan, akkor vissza. Ez ugye két esemény megírását jelenti. Több lehetőségünk is van, a leggyakoribbak talán a "hover" és a "mouseout" függvények (gondolom, egyértelmű, hogy melyik melyik :) ). 

$(this).find('li').hover(function(){
    $(this).find('a').animate({
        backgroundColor:ops.color1,color:ops.color2
    },250);

});
$(this).find('li').mouseout(function(){
    $(this).find('a').animate({
        backgroundColor:ops.color2,color:ops.color1
    },50);

});

A fő objektumon belül felkeressük a "li" elemeket és kifejtjük a "hover" eseményüket (azaz, mi történik, ha föléjük kerül az egér). Ne felejtsük el most se, hogy ezen a függvényen belül a "this" kijelölés már ezekre a "li" elemekre vonatkozik. Szóval akkor megkeressük ezekben az "a" linkeket és rájuk erőszakolunk egy "animate" effektet (tehát: a "li"-re húzzuk az egeret és ezáltal az abban lévő "a" kerül változtatásra). Azt mondjuk: a "backgroundColor" tulajdonság változzon a "color1" értékre, a "color" pedig a "color2" értékre, mindez pedig egy negyed másodperc leforgása alatt (250 ms). 
Ezután pedig szinte ugyanez a folyamat: a "mouseout" eseménykor (amikor elvisszük az egeret a "li"-ről) a benne levő "a" tagok színeit ugyanígy animáljuk, csak pont fordítva és ez gyorsabban fut le, 50 ms alatt.

Ezzel el is készült a plugin. Ki is lehet próbálni a működését... én három listát hoztam létre és különböző módon paramétereztem őket: opciók nélkül, egy opció megadásával, és mindkét opció értékének változtatásával:

$(document).ready(function(){
    $('#mymenu').myPlugin();
    $('#mymenu2').myPlugin({color1:'purple'});
    $('#mymenu3').myPlugin({color1:'yellow',color2:'gray'});
});

Próbálj meg Te is nekiugrani és készítsd el magadnak ezt a kis progit. Amennyiben szükségesnek érzed, segítségül letöltheted az általam kreált verziót. A csomagot itt éred el: KLIKK

Szólj hozzá:
süti beállítások módosítása