Mootools Fx Dia Optionen

30 Tage MooTools.30 Tage MooTools ist eine Sammlung von Tutorials zu lernen, die MooTools Javascrit Bibliothek zu verwenden, die erstmals 2008 von ConsiderOpen veröffentlicht wurde. Die Unterrichtsstunden sind eigentlich 23, da sie nach diesem Tag unterbrochen wurden. Da die ursprüngliche Seite derzeit ist Offline, die Tutorials wurden mit der Wayback-Maschine gesammelt, um sie allen Interessierten zugänglich zu machen, um MooTools zu benutzen. Die Tutorials basieren auf MooTools 1 2, so dass einige Teile veraltet werden konnten und sie sollten aktualisiert und erweitert werden, basierend auf den neuen MooTools Versionen. Das Urheberrecht und die Dankbarkeit für den ursprünglichen Unterricht wird von ConsiderOpen. Displaying Elemente mit. Welcome to Tag 23 von 30 Tagen von Mootools 1 2 Tutorials Wenn Sie Port t bereits, achten Sie darauf, überprüfen Sie den Rest unserer mootools Serie Weiter mit Unsere Tutorials über die Fx Plugins, wir werden uns einen Blick auf Dieses Plugin können Sie Inhalte anzeigen, indem Sie es in die Ansicht Es ist sehr einfach zu bedienen und macht eine großartige Ergänzung zu Ihrem UI Toolkit. Like alle anderen Klassen haben wir sahen At, das erste, was Sie tun müssen, ist eine neue Instanz der Klasse zu initiieren und wenden Sie es auf ein Element. First, können wir unsere html für die Folie Element. Und unsere CSS doesn t müssen alles fancy. Final, wir Initiiere eine neue Instanz von und übergib es unser Element variable. Since ist eine Erweiterung von Fx, können Sie eine der Fx Optionen und Veranstaltungen verwenden, aber kommt mit einer Reihe von Optionen selbst. Es gibt nur zwei Optionen, Mode und Wrapper Frankly, Ich habe mich nie mit Wrapper gefunden Ich habe nie über die Notwendigkeit gekommen, aber Modus ist, was bestimmt, ob Sie horizontal oder vertikal gleiten möchten. Mode gibt Ihnen zwei Möglichkeiten, vertikal oder horizontal Vertikale zeigt von oben nach unten und horizontale zeigt von links nach Rechts Es gibt keine Optionen von unten nach oben oder von rechts nach links, tho Ich verstehe, dass das Hacken der Klasse selbst, um dies zu erreichen ist relativ einfach Meiner Meinung nach ist es eine Option, die ich gerne sehen würde Standard, und wenn jemand hat Hackte die Klasse, um diese Optionen zu erlauben, bitte schreib uns eine Notiz. Mit dem Standard, wirft ein Wrapper um dein Slide-Element und gibt ihm Überlauf versteckte Wrapper erlaubt dir, ein anderes Element als Wrapper zu setzen Wie ich schon sagte, bin ich nicht klar, wo Das würde sich als nützlich erweisen und wäre interessiert, irgendwelche Gedanken dank der Horseweapon zu hören, um mir zu helfen, dies zu klären. Bietet auch viele Methoden zum Anzeigen und Ausblenden deines Elements. Wenn der Name impliziert, wird diese Methode das Startereignis auslösen und dein Element aufdecken. Schiebe dein Element zurück in den versteckten Zustand. Dies wird entweder das Element in oder aus, je nach seinem Aktueller Zustand Sehr nützliche Methode, um Click-Events hinzuzufügen. Dies wird das Element ohne einen Slide-Effekt zu verbergen. Dies wird das Element ohne Diashow. override-Modus mit Methoden. Jede der oben genannten Methoden auch akzeptieren Modus als optionalen Parameter, lassen Sie überschreiben alles in den Optionen. Verknüpfungen. Die Klasse bietet auch einige praktische Verknüpfungen für das Hinzufügen des Effekts zu einem Element. Statt einer neuen Klasse zu initiieren, können Sie eine neue Instanz erstellen, wenn Sie Folie auf eine element. setting Optionen setzen. Sie können sogar Optionen mit der Verknüpfung. Sobald die Folie ist, können Sie es mit der Methode einleiten. Slide akzeptieren. each entspricht den Methoden oben. That ziemlich viel deckt die Grundlagen Das Beispiel unten verwendet die meisten von dem, was wir oben gelernt, zeigt ein paar verschiedene Arten von Folien und bietet Einige Indikator divs so können Sie die events. First, richten Sie die html. Now, unsere css Wir können es ziemlich einfach. Finally, unsere mootools javascript. Here ist etwas Inhalt - A Beachten Sie die Verzögerung vor onComplete Feuer Dies ist aufgrund von Der Übergangseffekt, der onComplete wird nicht ausgelöst, bis das Schiebeelement aufhört zu elastischen Auch bemerken, dass, wenn Sie hin und her klicken, wird es den vorherigen Anruf abbrechen und geben die neue Priorität. Hier ist etwas Inhalt - B Hinweis, wie wenn Sie klicken Ich mehrmals schnell Ich kette die Ereignisse Diese Folie ist mit der Option Link Kette eingerichtet. Hier ist etwas Inhalt - C. Hier ist etwas Inhalt - D Beachten Sie, wie ich bin nicht in irgendwelche Ereignisse eingehakt Dies wurde mit der Abkürzung gemacht. Hier ist Einige Inhalte - E. Erfahren Sie mehr. Ist ein vielseitiges und unglaublich nützliches Plugin Um mehr zu erfahren, schauen Sie sich die docs die und Fx docs. Tomorrow s Tutorial. Will Post einen Link, sobald es veröffentlicht wird. MooTools bietet verschiedene, die helfen wird und diese Optionen geben Ihnen eine Kontrolle über die Effect. Let uns diskutieren ein paar Optionen, die MooTools bieten Bevor wir fortfahren, werfen Sie einen Blick auf die folgende Syntax für die Einrichtung von options. fps Frames pro Sekunde. Diese Option bestimmt die Anzahl der Frames pro Sekunde in der Animation beim Morphing Wir können diese anwenden Fps zu Morph - oder Tween-Funktionalitäten Standardmäßig ist der Wert von fps 50 Dies bedeutet, dass jede Funktionalität 50 Frames pro Sekunde während des Morphings benötigt. Lass uns ein Beispiel nehmen, in dem wir ein div-Element mit 5 fps morphisieren Code. Sie erhalten die folgende Ausgabe. Klicken Sie auf die START-Taste, um die Morphing-Animation zu finden Dies hilft uns, die Anzahl der Frames zu berücksichtigen, die für Animation verwendet werden Verwenden Sie verschiedene Werte für fps, um den Unterschied in der Animation zu erhalten Es wird empfohlen, den fps-Wert weniger zu verwenden Als 10 Dies wird Ihnen helfen, den Unterschied leicht. This Option wird verwendet, um die Einheit Typ für Zahlen Im Allgemeinen haben wir drei verschiedene Arten von Einheiten px, und ems Werfen Sie einen Blick auf die folgende Syntax. Die oben genannten Syntax ist zuzuordnen Prozentsatz an Einheiten Dies bedeutet, dass alle Werte in Zahlen als Prozentsätze behandelt werden. Diese Option bietet eine Möglichkeit, mehrere Anrufe zum Starten einer Animation zu verwalten. Wenn Sie mehrere Ereignisanrufe gleichzeitig anwenden, werden diese Anrufe als Link-Anrufe aufgenommen Anruf beendet, dann wird der zweite Anruf automatisch ausgeführt Es enthält die folgenden drei options. ignore Dies ist die Standard-Option Es ignoriert eine beliebige Anzahl von Anrufen, bis es die effect. cancel vervollständigt Dies hebt den aktuellen Effekt, wenn es eine andere gemacht wird Neueste call priorence. Chain Dies ermöglicht es Ihnen, die Effekte zusammenzuketten und den Stapel von Anrufen zu pflegen. Es führt alle Anrufe aus, bis es alle verketteten Anrufe im Stack durchläuft. Schauen Sie sich die folgende Syntax für die Verwendung der Link-Option an. Diese Option Wird verwendet, um die Dauer der Animation zu definieren Wenn Sie z. B. ein Objekt 100px in der Dauer von 1 Sekunde bewegen wollen, dann geht es langsamer als ein Objekt, das 1000px in 1 Sekunde bewegt. Sie können eine Zahl eingeben, die in Millisekunden gemessen wird Oder Sie können eine dieser drei Optionen anstelle von numbers. Short 250ms. Normal 500ms default. Long 1000ms. Take einen Blick auf die folgende Syntax für die Verwendung von duration. This Option wird verwendet, um die Übergangstypen zu bestimmen, zum Beispiel, wenn es sollte Ein reibungsloser Übergang sein oder sollte es langsam anfangen dann beschleunigen bis zum Ende Werfen Sie einen Blick auf die folgende Syntax, um Übergang anzuwenden. Die folgende Tabelle beschreibt die verschiedenen Arten von Übergängen. fxSlide Diashow - ein sehr flexibles, aber einfaches mootools Javascript Plugin an Schieben und animieren Bilder oder mehrere Bilder auf einmal. Many konfigurierbare Optionen. Horizontale und vertikale Folien. Sie können mehrere Elemente auf einmal wie 4x1 Image-Blocks. Automatic Slide-Funktionalität. Random Slide-Image Feature. Slide Buttons und Thumbnails Funktionalität. Die Folie Tasten werden automatisch auf Ihre Diashow eingestellt. Callback Funktionalität. Sie ​​können Ihre eigene HTML-Struktur definieren, so gibt es keine Notwendigkeit, Ihren bestehenden HTML-Code ändern, wenn Sie bereits eine auf Ihrer Webseite haben. Backward Kompatibel zu alten Mootool Versionen 1 2.You Kann verschiedene HTML-Elemente innerhalb eines Slip-Blocks verwenden, noch nicht getestet, aber es sollte ohne Probleme funktionieren. Die Alpha-Slide-Funktion ist noch nicht implementiert. Öffnen Sie den Demo-Ordner und haben Spaß. Zunächst müssen Sie die folgenden Skripte enthalten. Oder die vervielfachte Version. Oder Ihre eigenen mootools Kernversion. Siehe die für Beispiele, aber im Grunde müssen Sie den fallenden Code in Ihre HTML-Datei head. Implement der fallende Code in Ihre Javascript-Datei verwenden domready. If haben Sie eine andere Verzeichnis-Struktur, dann don t vergessen Um die Hintergrund-Bilder in Ihrer Datei anzupassen. Wenn Sie die Breite Höhe Ihrer Slide-Elemente oder den Abstand zwischen den Elementen ändern möchten, dann einfach bearbeiten Sie Ihre Datei und die fallende line. elements, Ihre Folie Elemente, e g. tabs true, Benötigen Sie eine Tab-Navigation für Ihre Gallery. buttons true, benötigen Sie eine Button-Navigation für Ihren Gallery. imageContainer ul, Ihr Gesamtbildcontainer, zB ul wählt ul. imageElement li, Ihre Imagecontainer, zB li wählt ul li. slideEffect Folie, wählen Sie zwischen verschiedenen Folieneffekte Folie, Alpha oder Ihre eigene one. slideDuration 850, Die Dauer der Folie effect. slideTransition false, Der Übergang Ihrer Folie effect. slideDirection x, Wählen Sie zwischen einer horizontalen y oder einer vertikalen Folie x. slideSize 1, Wie viele sichtbare Folien machen Sie wünschen. slideStep auto, Wie viele Folien sollten nach Schritt gesprungen werden. Schritt #.SlideStart 0, Wählen Sie, wo die Folie starten soll. SlideStartRandom false, Die Galerie beginnt mit einem zufälligen Folie value. slideAuto true , AutoSlide on oder off. slideAutoInterval 6000, Wählen Sie ein Dauerintervall Ihres AutoSlide Effect. slideAutoOnHoverIn Stop, Stoppen Sie den AutoSlide-Effekt, wenn Sie über ein Navigationselement schweben, das die Tabs, Schaltflächen und die Folienelemente selbst enthält. SlideAutoOnHoverOut start, setzt den AutoSlide fort Effekt, wenn du außerhalb einer Navigationselement. SlideCallback-Funktion bist, benutze deinen eigenen Callback, wenn eine Folie startet, zB function slideObject, slideElement, slideNum, slideDuration, slideEffekt, slideMode. initCallback-Funktion Verwenden Sie Ihren eigenen Callback bei der Initialisierung der Klasse, zB Funktion slideObject.