Best of Mootools-Plugins and Tutorials

Best of Mootools-Plugins and TutorialsJava-Script Frameworks gibt es unglaublich viele. Manche disqualifizieren sich aufgrund der geringen Möglichkeiten erweiterbar zu sein, andere hingegen sind in Sachen Dateigröße viel zu "großzügig" und damit oftmals sehr träge bezüglich der Ladezeiten. Andere Frameworks wie jQuery wiederum, sind flexibel und können durch kleine Plugins unproblematisch erweitert werden. Da sich aber nicht jeder, mit dem von uns bevorzugten Framework, auseinandersetzen möchte, bieten wir Euch eine kleine Sammlung an Plugins für das Framework mootools an. Vom Kalender-Plugin, über Bilder-Galerien, bishin zur Validierung von Formularendaten, auch mootools bietet einige Ansatzpunkte, Webseiten mittels JavaScript etwas Leben einhauchen zu können.

Mootools - Image-menu
Image-menuEin sehr ansehnliches und einfach anzulegendes horizontal ausgerichtetes Bilder-Menu welches auf Mouse-Bewegungen reagiert ist das "image menu" von phatfusion. Funktioniert im übrigen auch im IE 5.5!

Mootools - Image-gallery
Mootools - Image-galleryKaum eine Webseite oder ein Shop, kommt ohne dieses Feature aus. Bilder-Galerien! Die folgenden zwei Erweiterungen für Mootools zeigen Euch, wie ihr dieses Feature einfach und unkompliziert implementieren könnt.

Mootools - noobSlide
Mootools - noobSlideDie ebenfalls vielseitig einsetzbare Mootools Bilder-Galerie "noobSlide", besticht durch ihre Einfachheit, große Variantenfielfalt und die noch nicht einmal 2,5KB.

Mootools - FancyUpload
Mootools - FancyUploadDie manchmal nicht ganz kurze Zeit eines Datei-Uploads "zu verkürzen" ist Ziel des letzten Plugins, welches wir hier vorstellen wollen. "FancyUpload" ist eine Möglichkeit die Verweildauer während des Hochladens einer Datei, anhand eines grafischen Fortschrittbalkens via Motools anzuzeigen. Aber seht selbst.

Mootools - Fisheye-menu
Mootools - Fisheye-menuMac-Usern ist diese kleine horizontale "Taskleiste", in der man seine Programme ablegen kann längst ein Begriff. Aber auch Windows-User können dieses Feature dank Objektdock und Mootools nutzen. Das Plugins Fisheye ermöglicht es Euch dieses Mac Dock unkompliziert in die eigene Webseite einbauen zu können.

Mootools - Reflections
Mootools - ReflectionsSpiegelungen von Bildern sind nicht erst seit den typischen "Web2.0-Logos" überall bekannt. Wie diese aber mittels eines kleinen Scriptes umgesetzt werden und mit denkbar geringem Aufwand Eure Bilder spiegeln lassen, zeigt das kleine Mootools-Plugin "reflections".

Mootools - Sortable-table
Mootools - Sortable-tableTabelleninhalte nach bestimmten Aspekten sortieren zu können, ist ein Komfort den niemand missen möchte. Ob mittels einer Suchmaske, einem Auswahlfeld oder dem "Aktivieren" der entsprechenden Spalte, dass Plugin "sortable table", biete eine Vielzahl an Möglichkeiten Tabellendaten via Mootools zu sortieren.

Mootools - Date-picker
Mootools - Date-pickerEine Reise online zu buchen, ist ohne die Angabe eines An- und Abreisedatums undenkbar. Dieses kleine aber feine Mootools-Plugin "date-picker" ermöglicht es Euch relativ unproblematisch die Kalender-Funktion in jedes Formular zu integrieren können.

Mootools - Form-validation
Mootools - Form-validationDie Überprüfung der eingegebenen Daten eines Formulars gehört nicht nur aus Gründen der Usability zu einer unverzichtbaren Aufgabe. Sondern kann auch dafür sorgen, dass bspw. Abbrüche bei Buchungen oder Kaufvorgängen zurückgehen können.

Mootools - Fancy-menu
Mootools - Fancy-menuEin Script welches dafür sorgt, dass innerhalb einer Navigation der Mausbewegung gefolgt wird und sich dann beim entsprechenden Navigationspunkt "einpendelt", trägt die Bezeichnung "Fancy menu". Ein etwas anderer Effekt, der in (fast) jeder Navigation für aufsehen sorgen wird.

Mootools - Slider-menu
Mootools - Slider-menuDas vertikale ausgerichtete Menu "Accordion" mit Akkordeon-Effekt von Ryan Scherf bringt jede Navigaton die gewisse Bewegung. Ein wirklich nett anzusehender Slide-Effekt.

Mootools - Slider
Mootools - SliderEin weiteres Script zur Ergänzung von Mootools aus dem Hause Phatfusion ist das Pluing "Slider". Hierbei kann eine Art Regler durch klicken oder ziehen, auf eine bestimmte Position versetzt werden und nimmt für einen Regler typisch, einen der gewählten Position entsprechenden Wert ein.

Mootools - Tooltip
Mootools - TooltipUnscheinbar, aber oftmals unverzichtbar. Tooltips! Die Möglichkeit dem User einer Webseite zusätzliche Informationen zukommen zu lassen, finden in nahezu jedem JavaScript-Framework Anwendung. Ein einfache Script für Mootools bietet Chris Esler mit seinem Tooltip-Plugin.

More Mootools

Weitere Plugins oder Tutorials zum Mootools-Framework, werden selbstverständlich in einer Mootools-Liste ( samt "Entdecker" ) aufgenommen.

Ähnliche Artikel zum Thema Mootools:
  1. Peter
    11 Dez 2008, 16:57

    Zum Einstieg ist das Mootorial zu empfehlen: http://www.mootorial.com/wiki/


  2. rniederer
    11 Dez 2008, 20:55

    Super Zusammensetzung. Vielen Dank!!! Hat genial Links drunter... leider fehlen mir bei ein paar Plugins die Tutorials... :-(


  3. Visiongraphix Webdesign
    12 Dez 2008, 10:29

    Ich finde die Plugins super. Nur: die alte schwarze Website von mootools mit dem Wizzard für das JavaScript vermisse ich schmerzlich. Das war einfach genial. Im Moment finde ich die Website eher undurchdringlich. Oder stehe ich mit meiner Meinung allein da?


  4. Peter
    12 Dez 2008, 16:48

    Welcher Wizzard? Meinst du evtl. den Core- und den More-Builder?


  5. Christoph 15 Dez 2008, 10:25

    Sehr schöner Artikel, die Skripte kannte ich noch nicht alle, besonders die Reflections kann ich bei meinem aktuellen Projekt gut gebrauchen. :)

    Ich finde die Aufteilung in Core- und Morebuilder unglücklich, da man jetzt die Abhängigkeiten selbst auflösen muss. Einen Builder für alles halte ich für sinnvoller.


  6. Mischa
    19 Dez 2008, 18:58

    Hmm, da sind wirklich coole Sachen dabei. Schade eigentlich, dass ich auf Prototype angwiesen bin. Gibt's da ne Möglichkeit dennoch gleichzeitig JQuery oder eben Mootools zu verwenden?


  7. Michael 10 Dez 2009, 10:14

    Danke für die Links :)


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage