Weblabor

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.