Artikelsammlung zu MooTools

Ich fange hier mal eine Artikelsammlung rund um Mootools an, da das ja ein durchaus interessanter Aspekt von TYPOlight ist.

Englische Artikel:

• jQuery vs. MooTools: Artikel beleuchtet die unterschiedlichen Ansätze der beiden Frameworks
• Allgemeine MooTools Seite mit MooTools Demos
• MooTools Tutorial Website
• eSteak MooTools Slices

Deutsche Artikel:

• Mootools für die Massen. Teil 1: Mootools im Überblick
• Mootools für die Massen, Teil 2: Dollars und Events
• MooTools 1.2 Einführung "Hello World"

Schöne Anwendungsbeispiele als Anregung was mit MooTools so möglich ist:
Große Liste von Websites die mit MooTools arbeiten (Schwergewichte wie "CNET Networks", "MTV Germany", "Stanford University", ...)

Ganze Effekt-Sammlungen/Aufbauten:

• phatfusion Sammlung
• mocha(ui) - MooTools Web Application User Interface mit mocha Demo
• Meteora Application Sammlung auch mit meteora Demos
• Uvumi Sammlung auch mit diversen Demos
• JxLib - a javascript library for creating graphical user interaces
• moo.rd Erweiterung

Einzelne Effekte:

• JavaScript Table Row Highlighter Class using Mootools
• Slideshow 2
• Color Selection Sphere
• Sortables - super simple
• Rubber Band Selection
• Drawers
• Unlimited Drop Menu
• Reflection.js for MooTools
• Unobtrusive JavaScript date-picker widgit
• BarackSlideShow
• MooFlow Galerie
• Fancy Sliding Menü
• Fancy Sliding Side Bar
• NoobSlide
• Textbox List
• Calendar (von Electricprism)
• Fancy Upload
• MooTools ToolTips
• MooTabs
• MooRainbow
• Fisheye-menu
• ddMenu Demo
• BeSlimed MooTools Game

Quellen für diese Liste: Google, Medianotions Blog, Kulando Blog, astBlog

Noch eine Anmerkung die mir persönlich wichtig ist:
Plant eure MooTools Scripte immer so, dass man auch dann noch auf die Inhalte zugreifen kann wenn aus irgendeinem Grund Javascript nicht aktiv ist (z. B. weil die Sicherheitseinstellungen in einem Firmennetzwerk so hoch sind oder die Leute mit Handy/PDA/etc. unterwegs sind die JS zum Sparen von Übertragung einschränken oder ganz unterbinden). Bei CNet sieht man, was passiert, wenn man daran nicht denkt. Der Effekt für die Teaser mit Bild oben auf der Startseite ist sehr cool. Wenn JS inaktiv ist, kann man die Inhalte aber überhaupt nicht mehr lesen, da alles übereinander klebt!

Bei der Stanford University sieht man hingegen, wie man es richtig macht. Mit aktivem JS kann man oben die Subnavi schön ausfahren. Ohne JS kann man aber die Hauptpunkte der Navi immer noch anklicken und kommt dann auf der Folgeseite regulär zu allen Subinhalten. Mit JS gibt es also einen Usability-Bonus, aber ohne JS kann man die Seite auch sauber nutzen.

Das unterscheidet in meinen Augen einen normalen Programmierer von einem guten Programmierer ;)

Zum Thema passt noch: Ajax-Extensions barrierefreier machen

Danke Nina für die Tolle Sammlung, leider ist MooRainbow falsch verlinkt (Link zeigt auf https://community.contao.org/de/MooRainbow) kannst du das noch fixen bitte?

Danke nochmals, da hab ich jetzt einiges zu lesen :)

Danke für den Hinweis, hab es korrigiert.

Hallo Nina,

super Beitrag!

Komponenten:

• omnigrid eine sehr mächtige Tabelle mit Sortierung, Pagination, nachladen der Daten per AJAX/ ...
• Sammlung verschiedenster Komponenten (manche davon wurden auch schon von Nina gelistet)

Ich schliesse mich dem Aufruf von Nina an, mit Umsicht JS zu programmieren. Hier kann man besonders von den jQuery Leuten viel lernen. Am besten man sucht mal nach den Stichworten "javascript unobtrusive", da findet man viele gute Ideen, wie man eine Seite aufbaut, die ohne JS funktioniert und mit JS halt noch ein bischen besser.

Es werden sich immer wieder Scripte überschneiden, aber ich finde die Sammlung super cool - danke Nina!

Hier auch noch was von meiner Seite: http://www.consideropen.com/blog/category/mootools-12/

Auch beschrieben, wie man Sortables braucht, ein wahnsinnig mächtiges Feature wie ich gemerkt habe :)

Ok, mal sehen, ob ich auch noch ein paar Links beisteuern kann.

*in den Bookmarks kram*

• mParallax
• Slide Effect
• Login-Panel
• FormCheck
• AutoCompleter

Edit: Gerade wurde auf Smashing-Magazine ein Artikel zu MooTools veröffentlicht, der ganz gut hier rein passt wie ich finde. :)

Hier ist auch noch eine "kleine" Kollektion: http://www.smashingmagazine.com/2009...rces-round-up/

Und noch eine Sammlung http://www.w3avenue.com/2009/07/28/l...-for-mootools/

Salve,
wenn man 'früher' das swap image von DW genutzt hat, kann man für mootools nun auch dieses (ganz einfache) script nutzen:

http://davidecaffaratti.com/2009/05/...ls-swap-image/

die bilder müssen nicht zwingend ein a-tag haben.

Schöne Sammlung! Viele Dank!

Könntest du noch die offizielle Script- / Plugin-Sammlung von MooTools aufnehmen?

Hi, ich bin mir nicht sicher ob Ich das hier oder unbekannter Ort schreiben soll...

Also: Ich hab heute 3 PlugIns online gestellt, insbesondere Accessible Tabs nach dem Vorbild von Dirk Ginader könnte euch interessieren, die anderen sind eher Hilfsklassen. Insofern 'Link' zu Anleitung/Blogeintrag/Download/Demo

Viel Spaß! MFG Jan

HI

Die Tab-Sache ist super! Übrigens kann ich auf deiner Website nicht kommentieren, auch nach 20 Mal steht da: „Bitte beantworten Sie die Sicherheitfrage“. :(

Sebastian

Danke für den Hinweis! Hab die Sicherheitsfrage jetzt mal rausgenommen (Test klappte), mit so ner kleinen Seite sind Bots ja recht unwahrscheinlich....

Das passiert wenn man den ganzen Tag noch dran rumschraubt.

UPDATE: Mein 100ster Beitrag, ich bin halt forenfaul.

Zitat:

---

Zitat von FloydThreepwood

Hi, ich bin mir nicht sicher ob Ich das hier oder unbekannter Ort schreiben soll...

Also: Ich hab heute 3 PlugIns online gestellt, insbesondere Accessible Tabs nach dem Vorbild von Dirk Ginader könnte euch interessieren, die anderen sind eher Hilfsklassen. Insofern 'Link' zu Anleitung/Blogeintarg/Download/Demo

Viel Spaß! MFG Jan

---

Hallo FloydThreepwood,
super Sache mit den Tabs :-)
Ich konnte die zwar schon mit jquery einbauen, werde das aber noch mal abändern, damit ich nicht 2 JS-Frameworks nutzen muss.
Jetzt brauch ich das nur noch als TL-Erweiterung und ich kann das auch für Kunden nutzen :)

Vielen Dank!
und
Viele Grüße

@MackP

Ich war mir vor einem Monat auch noch scher innerhalb einer Woche alles fertig machen zu können... ;)

Über eine TL-Erweiterung hab ich zwar schon nachgedacht, bin mir aber noch sehr unsicher, wie ich das machen werde. Zwar bietet sich für TL ein Javascript-'Präprozessor' an, da ja alle Elemente schon vorhanden sind. Ich habe aber noch keine Idee, wie da ein Interface bei rausspringen wird.

MFG Jan

Na, ich mein ja auch nicht das du unbedingt ne Erweiterung dafür schreiben musst. Eventuell macht das ja auch jemand anders ;)

Leider hab ich im Moment nicht wirklich Geld um sowas zu unterstützen :(

Ein Interface.. hmm ich würde mir das im Grunde so vorstellen wie die subcolumns Erweiterung. Damit kommen auch Kunden sehr gut zurecht, da es an sich simpel ist und Übersichtlich im Backend.
Und anstelle von Breiten und Anhal der Spalten könnte es hier Anzahl der Tabs und Art vom Effekt sein. So könnte man bei jeder Ansammlung von Tabs einen anderen Efekt nehmen wenn man das braucht und es ist an sich schön simpel.

Aber wie immer.. ich hab Ideen. Nur kann ich die leider nicht umsetzen ^^

Schöne Nacht auf jeden Fall noch ;)
Viele Grüße

HalloMacKP,

Ich habe jetzt neben deinem Vorschlag auch den Vorschlag Accordeon gehört, beide sind mir bekannt aber: Sie berauben dem ganzen das 'accessible'. Das PlugIn funktioniert nur dann gut, wenn es auch den richtigen HTML Aufbau vorgesetzt bekommt. Ich sehe kaum eine vernünftige Möglichkeit so etwas über ContentElemente zu leisten.

Viel lieber würde ich einen ganzen Artikel zu einer Tab-Sammlung machen und dann jede vergebene Überschrift eines bestimmten Typs zum Tab-Header machen. Das habe ich allerdings bisher kaum gesehen. Ist das der TYPOlight Weg?

MFG Jan

Darf ich mal fragen, was der Unterschied ist zu dem da: https://contao.org/erweiterungsliste...010039.de.html

?

Gibt's ja schon ewig :D

Hallo FloydThreepwood,
Accordion funktioniert ja fast genau so wie ich mir das dachte.
Deinen Einwand kann ich da nur zum Teil verstehen, da man so ja das HTML praktisch vorgeben würde.
Inhaltlich kann da wieder alles sein.
Mit den Artikeln als Idee von dir kann ich allerdings auch versehen. Allerdings muss ich sagen das so etwas wirklich verdammt viel werden kann und nicht so flexiebel ist.
Ich nutze auf manchen Seiten die Artikel extra als logische Unterteilung von Seiten (für mich und die Pflegenden). Ab einer gewissen Seitengröße ist das wirklich sehr viel was man da überblicken muss/möchte.
Und: Man hat im Grunde nicht mehr so einfach die Möglichkeit Artikel anteasern zu lassen bei mehreren.. da muss man sich dann für eine Methode entscheiden.. und das finde ich immer schade und ist in einer Erweiterung dann nicht mehr wirklich Änderbar.

Das so als Gedanken die ich dabei habe.
Wie du das jetzt machst, ist ja deine Entscheidung. Wer weiß, vllt brauchst du es auch eher anders ;-)

Viele Grüße

PS: sollten wir vllt nen eigenen Thread aufmachen dafür? So langsam hat das ja nix mehr mit dem Thema zu tun..

PPS: @ Toflar, ja.. die ist schon richtig alt.. ich weiß gar nicht mehr was ich da nicht so prickelnd fand.. aber so wie ich mich kenne sah das ohne JS nicht gerade passend aus... Hast mal nen Beispiel zur Hand wo die Erweiterung genutzt wird? Sonst install ich mir die nachher mal.

Hallo Nina,
danke an dich für diese Super COmmunity. Seit ich den Podcast auf Technikwürze gehört hab, weiß ich ja nun, dass du deinen Kopf dafür hinhalten muss. Daher ein besonderer Dank an dich und alle die hier Ihr wissen teilen. Für Neueinsteiger ist das wirklich eine Goldgrube und der Spaß mit Contao steigt damit von Tag zu Tag :-))