Moo.FX

Moo.FX ist eine Javascriptbibliothek, die für visuelle Effekte in HTML Seiten verwendet wird.
Die Bibliothek ermöglicht die einfache Manipulation der Transparenz, Grösse und verschiedener anderer Attribute (fast) beliebiger HTML Elemente durch Javascript Funktionsaufrufe.

Sie wird von der italienischen Webagentur Mad4Milk entwickelt und steht unter der OpenSource Lizenz MIT Artistic License (MIT) kostenlos zur Verfügung.

Super Lightweight

Einer der grössten Vorteile von Moo.FX gegenüber anderen Bibliotheken, wie beispielsweise Scriptaculous, ist, dass sie “super Lightweight” ist.

Moo.FX basiert auf einer Lightversion der Prototype Bibliothek, die auf die nötigsten Funktionen beschränkt wurde und nur 4 KB umfasst.

Die Moo.FX Bibliothek umfasst insgesamt nochmal 3 KB.
Alles in Allem ergibt sich also lediglich eine Dateigrösse von 7 KB.

Dies ist eine Ersparnis an Traffic / Dateigrösse von über 90% gegenüber Scriptaculous. Allerdings beschränkt sich Moo.FX auch auf rein visuelle Effekte.

“Ajax” Funktionalitäten wie sortierbare Listen (“sortables”) oder Drag and Drop, werden nicht unterstützt. Hier muss man dann doch eine der “fetten” Varianten bemühen.

Einfache Einbindung

Moo.FX besteht nur aus einer JS Datei und lässt sich so sehr einfach in den HEAD Bereich von (X)HTML Dokumenten einbinden. Die benötigten Funktionen definiert man einfach im window.onload Element der Seite.

Beispiel:

window.onload = function()
{
myTrans = new fx.Opacity("element", {duration: 400});
myHeight = new fx.Height("element", {duration: 400});
myWidth = new fx.Width("element", {duration: 400});
}

Um einen Effekt im “geschlossenen” Zustand zu instantiieren, ruft man in window.onload zusätzlich noch die Methode Effektname.hide(); auf.

Dann kann im BODY jederzeit über Eventhandler oder sonstiges DOM Scripting auf die Effekte zugegriffen werden.

Grundsätzlich stehen für jede Funktion die Methoden toggle() und custom(x,y) zur Verfügung. Mit dem Aufruf der Methode myTrans.toggle(); wird der entsprechende Effekt (hier: Transparenz) ausgelöst und komplett ausgeführt.

Beispielsweise wird bei einem unsichtbaren Element durch “toggle” der Einblendeffekt bis zur vollständigen Sichtbarkeit ausgelöst. Mit einem erneuten Aufruf von toggle() würde dann der Effekt umgekehrt, also ein Ausblenden zur kompletten Unsichtbarkeit ausgelöst.

Die Methode custom(x,y) ermöglicht es dem Funktionsaufruf einen Start und Endpunkt für den Effekt zu übergeben.

So würde ein Aufruf vonmyTrans.custom(1.0, 0.5) ein “Abblenden” bewirken, da die Deckung von 100% auf 50% gesenkt würde.
So ist es sehr einfach möglich seine Effekte fein granuliert einzustellen.

Funktionen

Im folgenden möchte ich einen kurzen Überblick über die Funktion von Moo.FX und deren Einsatz geben.

Grundfunktionen

Moo.FX bietet 3 grundlegende Funktionen für Effekte an: Opacity, Height und Width

• Opacity
  Über die Funktion Opacity lässt sich die Alpha-Transparenz von (fast) beliebigen Block- oder Inlineelementen beeinflussen.
  Beispielsweise ist hiermit ein Ein- und Ausblenden von Elementen möglich.
  Beispiel:

  <a onclick="myTrans.toggle();" href="javascript:void(0);">Ausblenden </a>
  <div id="element">Dies ist auszublendender Text</div>

• Height
  Mit der Funktion height ist die Manipulation der Höhe von Elementen möglich.
  Beispielsweise kann man mit height die Elemente horizontal “ausklappen” lassen.
  Beispiel:

  <a onclick="myHeight.toggle();" href="javascript:void(0);">Element ausklappen</a>
  <div id="element">Dies ist ein Bereich zum Ausklappen</div>

• Width
  Mit der Funktion width kann man die Breite von Elemente manipulieren.
  Beispielsweise ist damit ein vertikales “Verbreitern” von Elementen möglich.
  Beispiel:

  <a onclick="myWitdth.toggle();" href="javascript:void(0);">Element verbreitern</a>
  <div id="element">Dies ist ein Bereich zum Verbreitern</div>

Beispiele

Ausklappbare Textbox

Ein einfaches Beispiel ist eine ausklappbare Textbox.
Die Textbox wird beim Laden der Seite versteckt, und kann mittels eines Links geöffnet und geschlossen werden.

Code:

<html>
<head>
<script src="prototype.lite.js" type="text/javascript"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type = "text/javascript">
window.onload = function()
{
//Ding initialisieren, nur hoehe
myHeight = new fx.Height("myding", {duration: 500});

//Alle Dinger auf unsichtbar setzen.
myHeight.hide();
}

</script>
</head>

Hier initialisieren wir im Seitenkopf zunächst in window.onload das neue Objekt myHeight , für das Element “myding”.
Danach verstecken wir das Element durch den Aufruf der Methode hide()
So erscheint die Box zunächst als “eingeklappt”.

Nun müssen wir im Body noch die Box und den Link zum öffnen und schliessen hinzufügen.

Code:

<body>
<a href = "javascript:myHeight.toggle();">Aufklappen</a><br>

<div id = "myding" style = "width:20%;background-color:#CCCCCC;">
huhu
<br>
noch mehr contentnoch mehr contentnoch 
mehr content noch  mehr content
noch mehr content
noch mehr contentnoch mehr content</div>
</body>
</html>

Der Link ruft die JS Methode toggle() des Objekts myHeight auf.

Schon haben wir eine ausklappbare Textbox erzeugt.
Ihr könnt euch das Beispiel hier in Aktion ansehen: http://www.ajax-info.de/klappboxen1.html

Erweiterte Funktionen

Aufbauend auf diesen Grundfunktionen hat der Autor von Moo.FX auch eine zusätzliches Effekt Pack erstellt, das einige erweiterte Effekte gleich mitliefert.

Ein Artikel zum Effektpack findet sich hier

Ressourcen

Moo.FX Effektpack: http://www.ajax-info.de/moo-fx-tutorial/moo-fx-effektpack-tutorial
Download:Moo.FX
Projektseite: Mad4Milk
Offizielle Dokumentation: http://moofx.mad4milk.net/documentation/