Share
Der Einstieg in jede Art von Framework kann eine einschüchternde Erfahrung sein. Um Ihnen zu helfen, haben wir diese Woche ein ausführliches Tutorial und einen langen Screencast, um einen Absturzkurs für diese beliebte JavaScript-Bibliothek bereitzustellen. Mit so viel Fokus auf jQuery kann man leicht vergessen, dass Mootools eine ebenso mächtige Bibliothek mit einer großen Fangemeinde ist.
Dieses Tutorial enthält einen Screencast für Tuts + Premium-Mitglieder.
Nach dem ersten Umzug zu Mootools war ich frustriert von der mangelnden Unterstützung der Community und endete sofort wieder mit Prototype. Nachdem ich mich mit der Arbeit mit Frameworks wohler fühlte, zog ich zu Mootools zurück und schaute nicht zurück.
Mit diesem Tutorial versuche ich sicherzustellen, dass Sie einen guten Einstieg in das Mootools-Framework haben. Ich werde Sie durch das Herunterladen und das Setup sowie einige grundlegende Elemente von Mootools führen. Danach werde ich einige Zeit damit verbringen, Sie durch die Verwendung der Mootools Docs zu führen, eine Website, die Sie häufig während der Verwendung von Mootools besuchen.
Na gut, genug Geschichten, lasst uns die Hände schmutzig machen.
Das Schöne an der reinen Arbeit mit Javascript ist, dass wir die Dateien nicht auf einem Web- oder lokalen Server ausführen müssen. Alles was Sie für dieses Tutorial benötigen, ist:
In diesem Tutorial werde ich Firefox und Firebug verwenden, um einige Debugging-Tipps zu zeigen. Ich empfehle Ihnen, Firefox und Firebug zu verwenden. Firebug vereinfacht die Arbeit mit Mootools oder einem beliebigen Framework um das 100-fache.
Sie können Firebug hier herunterladen
Gehen Sie zu www.Mootools.net/download
Im Moment werden wir sowohl die Core-Bibliothek als auch die More-Bibliothek aufnehmen. Dies ist nur um sicherzustellen, dass wir nichts vermissen. Wenn Sie sich mit Mootools vertraut machen, werden Sie feststellen, dass nicht alle Komponenten für bestimmte Anwendungen benötigt werden. Sie können also Mootools-Bibliotheken nach Ihren Bedürfnissen erstellen und die Dateigröße klein halten.
Laden Sie die komprimierte Mootools 1.2.3 YUI-Datei herunter und speichern Sie sie auf Ihrem Desktop.
Wechseln Sie zum Builder, wählen Sie jede Option aus und laden Sie die komprimierte YUI-Datei herunter.
Lassen Sie uns einen neuen Ordner mit dem Namen Moo erstellen. In diesem Ordner können Sie einen weiteren Ordner mit dem Namen inc anlegen. Erstellen Sie zur Vereinfachung eine weitere Datei in unserem inc-Ordner mit dem Namen js und werfen Sie beide Mootools-Dateien in diesen Ordner.
Erstellen Sie in unserem Moo-Ordner eine neue Datei mit dem Namen index.html, und öffnen Sie diesen Sauger.
Ist es offen? Gut, jetzt öffnen Sie es auch in Firefox. Sie sollten eine leere Seite sehen. Wechseln Sie zurück zu Ihrer index.html-Datei in Ihrem Editor.
Um Mootools in unser Skript aufzunehmen, müssen wir Ihrer HTML-Datei zwei Codezeilen hinzufügen. Wenn Sie schon einmal eine Javascript-Datei in ein Skript eingefügt haben, wird Ihnen dies sehr vertraut sein.
Wir sind jetzt fertig und können loslegen!
Damit Mootools mit Elementen auf unserer Seite sprechen kann, verwenden wir die $ () - Funktion, um ein Element anhand seiner ID abzurufen.
Erstellen wir ein neues Div, geben Sie ihm eine ID und etwas Text und bringen Sie Mootools dazu, mit ihm zu sprechen.
Danach können wir einige Javascript-Tags setzen, damit wir mit dem Schreiben einiger Mootools beginnen können.Hallo Leute!
Wir haben div erstellt und ihm eine ID gegeben "Box". Wir haben etwas Text darin eingefügt und einige Skript-Tags erstellt, damit wir anfangen können, etwas Mootools-Güte einzugeben.
Wenn wir die $ -Funktion verwenden und die ID unserer Box übergeben, können wir feststellen, dass Mootools nicht alle Attribute von uns erhält "Box" div. Unser variables Element enthält jetzt alle diese Daten.
Accentsconagua
var Element = $ ('Box'); Wenn wir die Seite aktualisieren, können wir nicht sehen, dass etwas passiert, aber wir wissen, dass die Dinge im Hintergrund ablaufen. Hier kommen console.log () und Firebug ins Spiel.
Wenn Sie Firebug öffnen, sollte eine leere Konsole angezeigt werden. Mit console.log () können wir Informationen an Firebug übergeben, um sie für uns anzuzeigen. Dies ist äußerst hilfreich beim Debuggen eines Skripts, da Sie damit Informationen in verschiedenen Schritten des Skripts anzeigen können, um festzustellen, wo Fehler auftreten.
console.log ('Oh, Hallo alle!'); 
Wir können damit auch Informationen anzeigen, die sonst nicht in unserem Browser angezeigt würden.
Verwenden wir console.log (), um einige Informationen über unsere anzuzeigen "Box" div.
console.log (Element);
Wir haben gelernt, dass wir $ () verwenden können, um ein Element abzurufen, aber was ist, wenn wir die Informationen vieler Elemente erhalten möchten. Wir möchten nicht 100 Instanzen von $ () verwenden, die nur unordentlich werden. Hier kommt das $$ () ins Spiel!
Wer einen braucht, lasst viele!
Lass uns 5 Links zu unserer Seite hinzufügen.
Ich bin der erste Link
Ich bin der zweite Link
Ich bin der dritte Link
Ich bin der vierte Link
Ich bin der fünfte Link
… Javascript-Tags… var links = $$ ('a'); console.log (Links);
Unsere Link-Variable enthält jetzt eine Reihe aller Links.
Also gut, wir haben unsere Elemente erstellt und jetzt reden wir mit Mootools, aber das macht keinen Spaß. Der Front-End-Benutzer sieht keine Änderungen, also lassen wir uns von diesem langweiligen Backend-Kram los und gehen etwas mehr Spaß!
Wir haben gerade über die Elemente mit unseren Getter-Funktionen informiert. Mit $ () und der Element-ID können wir ein einzelnes Element erhalten. Wir haben auch über mehrere Elemente informiert, die $$ () und den Elementtyp verwenden.
Bei der Verwendung von $$ () können wir entweder den HTML-Tag-Namen übergeben oder CSS-Klassenselektoren verwenden, um eine Gruppe von Elementen zu erfassen. Ein schnelles Beispiel für den Erwerb von Klassennamen würde so aussehen.
var elements = $$ ('. myclass'); Das würde ein Array aller Elemente auf der Seite mit der css-Klasse von zurückgeben "meine Klasse".
Die Theorie ist trocken wie ein Knochen und das ist, wofür die Docs sind, aber Sie kamen hierher, um sich die Hände schmutzig zu machen, also lassen Sie uns schmutzig werden.
Nun, da wir unsere Elemente erhalten, können wir die Einstellfunktionen verwenden, um die Elemente auf dem Bildschirm zu bearbeiten.
Unsere "Box" div sieht irgendwie schlicht aus, also fügen wir etwas Farbe hinzu. Wir haben unser Element bereits in unsere Elementvariable aufgenommen.
element.set ('styles', 'color': 'red'); Wir verwenden unsere Elementvariable und hängen die Funktion set () mithilfe von element.set () an..
Es gibt viele Argumente, die wir verwenden können, um unser Element zu ändern, aber jetzt werden wir Stile verwenden. Als Nächstes übergeben wir einige Optionen für unser Stilargument. Wir übergeben die Farboption und setzen unseren Text auf Rot. Styles können alle verfügbaren CSS-Optionen verwenden. Lassen Sie uns die Hintergrundfarbe ändern, während wir hier sind. Fühlen Sie sich frei, mit den Stilen herumzuspielen und sehen Sie, wie bunt Sie unser Boxelement gestalten können.
element.set ('styles', 'color': 'red', 'background': 'yellow'); Unsere "Box" Element sieht nicht ein bisschen weniger schlicht aus. Wenn wir viele Stile auf unser Box-Element anwenden wollten, kann dies zu unnötigem Code führen. Glücklicherweise können wir CSS-Stile und ein anderes Argument verwenden, um den Code zu reduzieren. Fahren Sie fort und löschen Sie den element.set () - Code. Wir werden einige CSS-Stile mit Inline-CSS hinzufügen.
Hinweis: Zur Vereinfachung schreiben wir unser CSS in die Datei. Wenn Sie jedoch eine tatsächliche Website erstellen, sollten Sie alle CSS und Javascript in einer separaten Datei speichern.
Über deinen "Box" div lässt einige Style-Tags hinzufügen und eine Klasse von .myclass erstellen.
Wir können jetzt set ('style') verwenden, um unseren neuen Stil zu unserem Element hinzuzufügen.
element.set ('class', 'myclass'); 
Einige andere Argumente, die wir mit set verwenden können, sind HTML und Text. Einige grundlegende Beispiele dafür sind:
element.set ('html', 'Hey Leute, jetzt bin ich mutig
'); element.set ('text', 'Hey Leute, keine HTML hier'); Welches Argument Sie verwenden, hängt davon ab, wofür Sie es verwenden müssen. Wenn Sie keine HTML-Werte übergeben müssen, verwenden Sie Text und umgekehrt, wenn Sie HTML-Werte übergeben müssen.
Wir haben set () verwendet, um unserem Stil einige Stile hinzuzufügen "Box" div, aber wir hätten die Klasse einfach per HTML zum div hinzufügen können. Wir müssen nicht wirklich Mootools verwenden, um den Stil hinzuzufügen, wenn wir ihn nur ändern, bevor der Benutzer die Änderung überhaupt sieht. Hier sind Events von Vorteil.
Lassen Sie uns alle unsere Links löschen und löschen Sie unsere Javascript-Tags.
Ihre index.html-Datei sollte jetzt nur diesen Code enthalten:
Hallo Leute!
Erstellen Sie einen neuen Link und geben Sie ihm eine ID der Schaltfläche direkt darunter "Box" div.
Jetzt fügen wir dieser Schaltfläche ein Ereignis hinzu, damit wir etwas Code ausführen können, wenn ein Benutzer auf den Link klickt. Wir verwenden dazu addEvent ().
$ ('button'). addEvent ('click', Funktion (e) ); Wir verwenden die bekannte $ () - Funktion, um den Mootools mitzuteilen, dass wir mit dem Link mit einer ID der Schaltfläche sprechen möchten. Als nächstes fügen wir das addEvent () hinzu und übergeben 2 Argumente. Das erste Argument ist das Ereignis, das erfasst werden soll, wenn ein Benutzer auf den Link klickt. Das zweite Argument ist eine Funktion mit einer Variablen von e. Diese Funktion wird ausgeführt, wenn der Benutzer auf den Link klickt und die Variable von e das Ereignis passiert. Sie werden verstehen, warum wir in diesem nächsten Schritt eine Variable mit der Funktion übergeben.
… In addEvent… e.stop ();
Wir weisen die Funktion stop () unserer Variablen von e zu, um den Browser für das Senden der Link-Aktion anzuhalten. Wenn Sie auf den Link klicken, wird die Seite normalerweise aktualisiert und alle Ihre Änderungen gehen verloren. e.stop () stoppt die Aktualisierung der Seite durch den Browser, sodass wir einige Mootools-Magie ausführen können!
Jetzt haben wir Mootools, die das Click-Ereignis erfassen, sodass Mootools unsere Klasse .myclass zu unserer hinzufügen kann "Box" div, wenn der Link angeklickt wird.
… In addEvent ()… element.set ('class', 'myclass'); Speichern Sie dies, aktualisieren Sie die Seite und klicken Sie auf Ihren Link. Wenn Sie auf den Link klicken, sollte das div jetzt ein wenig stilisiert sein. Wir haben das alles gemacht, ohne die Seite aktualisieren zu müssen. Hier werden Mootools sehr interessant.
Schnelle kleine Auffrischung, bevor wir fortfahren. Wir haben gelernt, wie Getter-Funktionen ($ und $$) verwendet werden, damit Mootools mit Elementen auf unserer Seite kommunizieren können. Dann haben wir gelernt, dass wir Setterfunktionen verwenden können, um diese Elemente zu manipulieren. Mithilfe von Ereignissen können Benutzerinteraktionen erfasst werden, sodass Elemente in Echtzeit bearbeitet werden können, ohne die Seite aktualisieren zu müssen, um jede Änderung anzuzeigen.
Mit den Mootools können Sie auch sofort neue Elemente erstellen, sodass der Benutzer die Seite anpassen kann. Dazu werden wir die neuen Funktionen Element () und inject () verwenden.
Beginnen wir mit einer neuen HTML-Datei. Löschen Sie entweder alles aus index.html oder erstellen Sie eine neue Datei.
In unserer Datei erstellen wir ein Div und 2 Links. Gehen Sie voran und erstellen Sie diese jetzt!
Wir verwenden $$ (), um beiden Links auf der Seite ein Ereignis hinzuzufügen. Wir werden das Klickereignis erfassen und dann ein neues Element erstellen. Als letztes werden wir unser neues Element in unser Programm integrieren "Ergebnis" div.
$$ ('a'). addEvent ('click', Funktion (e) e.stop ();); Wir verwenden $$ ('a'), um alle Links zu greifen, und fügen dann das AddEvent () an jeden Link an. Wir machen dies, weil das Codieren so reduziert wird, dass wir nicht jede ID der Links finden und addEvents für sie erstellen müssen. Wir werden die ID jedes Links verwenden, um zu bestimmen, welchen Stil wir hinzufügen müssen. Lassen Sie uns ein paar schnelle CSS für die Boxen, die wir erstellen werden, zusammenstellen.
Jetzt ist es an der Zeit, unsere Elemente zu erstellen und in die Seite einzufügen.
var class = this.id; var box = neues Element ('div', 'class': class); box.inject ($ ('result')); Zuerst erstellen wir eine Variable namens "Klasse" Halten Sie die ID des Links, auf den geklickt wurde. In der nächsten Zeile wird das Element erstellt. Wir machen dies, indem wir neues Element () verwenden und dann einige Argumente übergeben. Das erste Argument ist der Typ des Elements, das wir erstellen möchten. Wir möchten ein div erstellen, also übergeben wir den Wert von div. Der zweite Satz ist unsere Optionen. Wir möchten eine andere Klasse zuweisen, je nachdem, auf welchen Link geklickt wurde. Wir machen dies, indem wir zuerst die Funktion sagen, die wir einstellen möchten "Klasse" Option, dann übergeben wir unsere Variable der Klasse, die entweder zurückgibt "blaue Box" oder "grey_box".
Die letzte Zeile enthält unser neues Element, das wir in eine "Box" variabel und injiziert es in unsere "Ergebnis" div. Mootools weiß es zu injizieren "Ergebnis" weil wir das übergeben "Ergebnis" div mit einer Getter-Methode als Hauptoption.
Wenn wir nun die Seite aktualisieren und auf unsere Links klicken, sollten Sie feststellen, dass kleine Boxen erstellt werden und zur Seite hinzugefügt werden.
An diesem Punkt des Tutorials sollten Sie mit Getter- und Setter-Funktionen ziemlich vertraut sein, damit Mootools mit unseren Elementen sprechen kann.
Im letzten Teil dieses Tutorials werde ich auf einige der Animations- und Effektfunktionen von Mootools eingehen.
Lässt eine weitere neue Datei erstellen. In dieser Datei erstellen Sie ein Div mit etwas Text und einen Link.
Hallo Leute!
Ich habe jedem Element IDs hinzugefügt, damit wir Mootools dazu bringen können, mit ihnen zu sprechen.
Zu Beginn können Sie ein Ereignis an den Link anhängen. Das sollte jetzt sehr vertraut aussehen.
$ ('button'). addEvent ('click', Funktion (e) e.stop ();); Nun, da wir Mootools haben, die das Click-Ereignis aufzeichnen, können wir unser machen "Box" div Mit jedem Klick ein- und ausblenden.
$ ('box'). fade ('toggle'); Wenn wir jetzt auf unseren Link klicken, sollte das Box-Div ausgeblendet werden. Wenn wir erneut auf den Link klicken, wird er erneut angezeigt.
Fading ist cool und alles, aber wir können der Box einen Stil hinzufügen und sehen, ob wir sie wachsen lassen können!
Wir werden die Tween () - Funktion verwenden, um einige unserer Attribute zu animieren "Box" div.
In unserem Click-Event können Sie die Funktion fade () entfernen und durch Tween () ersetzen..
//$('box').fade('toggle '); $ ('Box'). Tween ('Höhe', '200'); Wenn wir jetzt auf den Link klicken, sollte unsere Box größer werden.
Die Tween-Funktion benötigt 2 Argumente. Das erste ist das Attribut, das wir bearbeiten möchten, und das zweite ist ein Wert. Wir möchten die Höhe der Box ändern und möchten, dass sie auf 200px animiert wird.
Was wäre, wenn wir wollten, dass die Box jedes Mal um 10 Pixel wächst, wenn wir auf den Link klicken? Zuerst müssten wir die aktuelle Höhe der Box ermitteln. Ich denke, wir können das mit unserer $ () - Getter-Funktion tun.
var box = $ ('box'); var height = box.getHeight (); var new_height = höhe + 10; box.tween ('height', new_height); Zuerst vergeben wir unsere "Box" div in eine Variable von box. Als Nächstes verwenden wir eine eingebaute Funktion von Mootools namens getHeight (), um die aktuelle Höhe von unseren zu ermitteln "Box" div. Wir möchten, dass die Box jedes Mal um 10 Pixel wächst, wenn der Link angeklickt wird. Daher erstellen wir eine neue Variable mit dem Namen new_height und weisen ihr den Wert height + 10 zu. Dies nimmt die aktuelle Höhe und erhöht sie um 10. ) Funktion an unsere Boxvariable, sagen Sie ihr, wir möchten die Höhe animieren und übergeben Sie den Wert von new_height.
Wenn Sie auf den Link klicken, sollte die Box größer werden. Wenn Sie erneut darauf klicken, wird es mit jedem Mausklick weiter wachsen.
Mootools hat einen umfangreichen Dokumentbereich auf ihrer Website. http://Mootools.net/docs/core
Wenn Sie beabsichtigen, Mootools zu verwenden, werden Sie mit diesem Abschnitt der Website sehr vertraut sein. Es ist in die verschiedenen verfügbaren Klassen und Funktionen unterteilt, die Mootools bietet.
Der Bereich, den Sie am häufigsten besuchen werden, ist der Elementbereich. In diesem Abschnitt finden Sie alle Informationen dazu, wie Mootools die Elemente auf der Seite kommuniziert und bearbeitet.
Ich habe Ihre großen Schläge gegeben, um Ihnen zu helfen, sich mit den Funktionen von Mootools vertraut zu machen. Wenn Sie weiter lernen möchten, schlage ich vor, einige der Seiten in den Mootools-Dokumenten zu lesen.
