Saját tulajdonságok animálása jQuery-vel
A következő budapest.js találkozón fej-fej mellett hasonlítjuk össze a népszerű JavaScript keretrendszereket. Ennek kapcsán elkezdtem kutakodni, hogyan lehet saját attribútumokat, illetve tulajdonságokat animálni, illetve CSS-ként kezelni jQuery segítségével.
A jQuery már alapértelmezetten pár egyedi tulajdonság lekérdezését teszi lehetővé. Ezek például az opacity
, scrollLeft
és scrollRight
. Ezeket mint CSS tulajdonság teszi elérhetővé a jQuery, ugyanakkor nem (feltétlen) azok. Azaz például az opacity
CSS tulajdonság Internet Explorer 9 előtt változatokban nincsen semmilyen hatással, mégis:
- // Be tudjuk állítani:
- $(elem).css('opacity', 0.5);
- // Le tudjuk kérdezni:
- $(elem).css('opacity');
És ez működik Internet Explorerben is. Hogyan? Hát úgy, hogy ezeket az egyedi tulajdonságokat a jQuery egyedileg kezeli.
Ahhoz, hogy hasonló saját „CSS” tulajdonságokat generáljunk, nem kell túl sokat tenni, csak ki kell bővíteni a jQuery cssHooks
objektumát. Például:
- $.each(['height', 'width'], function (i, v) {
- var camelCase = $.camelCase('dialog-' + v);
- $.cssHooks[camelCase] = {
- get: function (elem, computed, extra) {
- return $(elem).dialog('option', v);
- },
- set: function (elem, value) {
- var dialog = $(elem),
- position = dialog.dialog('option', 'position');
- dialog.dialog('option', v, parseFloat(value));
- dialog.dialog('option', 'position', position);
- }
- };
- });
Ezzel hozzáadjuk a dialogWidth
, és dialogHeight
egyedi tulajdonságot a CSS kezelőhöz. Ezután a következő sorok már működni fognak:
- $(elem).css('dialogHeight', 300);
- $(elem).css('dialog-height', 300); // ugyanaz a hatása mint az előzőnek
- $(elem).css('dialogHeight');
- $(elem).css('dialog-height'); // ugyanaz a hatása mint az előzőnek
A jQuery css()
függvénye a megkapott tulajdonság nevét camelCase formára alakítja; például abból, hogy dialog-height
dialogHeight
lesz. Ennek megfelelően kell a saját „CSS” tulajdonságunkat is definiálni, ahogy ezt meg is tettük a $.camelCase()
függvény segítségével.
Ahhoz, hogy animálni is tudjuk ezeket, már csak egy kicsi lépés van hátra. A jQuery a $.fx.step
objektumot használja az animáció aktuális lépésének lefuttatására. Alapértelmezetten minden tulajdonságra a $.fx.step._default()
függvény fut le. Hogy saját függvényt tudjunk lefuttatni, egyszerűen hozzá kell adni a $.fx.step
objektumhoz a saját kezelőnket.
- $.each(['height', 'width'], function (i, v) {
- var camelCase = $.camelCase('dialog-' + v);
- $.fx.step[camelCase] = function (fx) {
- jQuery.style( fx.elem, fx.prop, fx.now );
- };
- });
A fenti kód a $.fx.step
objektumot kibővíti egy dialogHeight
és egy dialogWidth
tulajdonsággal, és ezek után, amikor az animate
segítségével akarjuk módosítani a tulajdonságot, akkor már a $.cssHooks
-ban definiált függvényeket fogja használni.
- $(elem).animate({
- dialogHeight: 200,
- dialogWidth: 300
- }, {
- duration: 500
- });
Összefoglalás
Érdekesnek, és igencsak hasznosnak találtam ezen jQuery objektumok és nem igazán dokumentált függvények használatát. Érdemes lehet ezek után más gyöngyszemek után kutatni a jQuery forráskódjában.
Ezek után bármilyen egyedi tulajdonságot tudunk majd animálni, valamint CSS tulajdonságként kezelni. Sajnos a css
és az animate
ezen tulajdonságai csak jQuery 1.4.3 óta érhetők el, a korábbi változatokban az opacity
kezelése például be volt drótozva a kódba.
És ez mire jó?
És mire jó, hogy saját tulajdonságot animálsz? Az animate-el eddig is tudtál bármit animálni, akár összefűzve több dolgot. Mondasz egy példát, h miért jó ez?
Mintha kimaradt volna a cikkből a mondanivaló. :P
CSS3, widget, HTML tulajdonság
Másik példa HTML tulajdonság animálására:
Király, köszi! :)
A második példa nálam nem
Egyébként érdekes cikk, köszönet érte!
Firefox
number
illetverange
mezők. Ennek megfelelően astep
mező teljesen valid. Viszont a Firefox nem fér hozzá valamiért ebben az esetben astep
attribútumhozelem.step
formában.Ennek megfelelően frissítettem a kódot: