Mootools Fx Schiebeoptionen

30 Tage MooTools 30 Tage MooTools ist eine Sammlung von Tutorials zu lernen, die MooTools javascrit Bibliothek, zuerst veröffentlicht 2008 von ConsiderOpen verwenden. Die Lektionen sind eigentlich 23, da sie nach diesem Tag unterbrochen wurden. Da die ursprüngliche Website derzeit offline ist, wurden die Tutorials mit dem Wayback Machine gesammelt, um sie allen zugänglich zu machen, die daran interessiert sind, MooTools zu benutzen. Die Tutorials basieren auf MooTools 1.2, so dass einige Teile abgelehnt werden können und sie basierend auf den neuen MooTools Versionen aktualisiert und erweitert werden sollten. Das Copyright (und die Dankbarkeit) für den Originalunterricht wird von ConsiderOpen gehalten. Elemente mit Fx. Slide anzeigen Willkommen zu Tag 23 von 30 Tagen von Mootools 1.2 Tutorials. Wenn Sie haven8217t bereits, seien Sie sicher, den Rest unserer mootools Reihe zu überprüfen. Wenn wir unsere Tutorials über die Fx-Plugins fortsetzen, werfen wir einen Blick auf Fx. Slide. Mit diesem Plugin können Sie den Inhalt anzeigen, indem Sie ihn in die Ansicht verschieben. Es ist sehr einfach zu bedienen und macht eine große Ergänzung zu Ihrem UI-Toolkit. Die Grundlagen Wie alle anderen Klassen, die wir gesehen haben, ist das erste, was Sie tun müssen, ist eine neue Instanz der Fx. Slide-Klasse initiieren und wenden Sie es auf ein Element. Zuerst können wir unsere html für das Dia-Element. Und unsere css doesn8217t müssen etwas Phantasie. Schließlich initiieren wir eine neue Instanz von Fx. Slide und übergeben sie unsere Elementvariable. Da Fx. Slide eine Erweiterung von Fx ist, können Sie eine beliebige der Fx-Optionen und Ereignisse verwenden. Aber Fx. Slide kommt mit einer Reihe von Optionen selbst. Fx. Slide-Optionen Es gibt nur zwei Fx. Slide-Optionen, 8216mode8217 und 8216wrapper.8217 Ehrlich gesagt habe ich mich nie mit 8216wrapper8217 gefunden (ich habe nie die Notwendigkeit), aber 8216mode8217 ist was bestimmt, ob Sie horizontal oder vertikal gleiten wollen . Modus gibt Ihnen zwei Möglichkeiten, 8216vertical8217 oder 8216horizontal8217. Vertikal zeigt sich von oben nach unten und horizontal zeigt von links nach rechts. Es gibt keine Optionen zu gehen von unten nach oben oder von rechts nach links, tho Ich verstehe, dass Hacking der Klasse selbst, dies zu erreichen relativ einfach ist. Meiner Meinung nach, es8217s eine Option würde ich gerne Standard sehen, und wenn jemand gehackt hat die Klasse, um diese Optionen zu ermöglichen, schreiben Sie uns eine Nachricht. Standardmäßig wirft Fx. Slide einen Wrapper um Ihr Dia-Element und gibt ihm 8216overflow8217: 8216hidden8217. Mit Wrapper können Sie ein anderes Element als Wrapper festlegen. Wie ich schon sagte, ich bin nicht klar, wo dies in handliches kommen würde und wäre daran interessiert, alle Gedanken (danke horseweapon bei mooforum. net für helfen mir klar, dies zu hören). Fx. Slide-Methoden Fx. Slide bietet auch viele Methoden zum Anzeigen und Ausblenden Ihres Elements..slideIn () Wie der Name andeutet, wird diese Methode das Startereignis auslösen und Ihr Element sichtbar machen..slideOut () Gibt das Element wieder in den ausgeblendeten Zustand zurück. Dies schaltet entweder das Element ein oder aus, abhängig von seinem aktuellen Zustand. Sehr nützliche Methode, um Click-Events hinzuzufügen. Dadurch wird das Element ohne einen Gleiteffekt ausgeblendet. Dies zeigt das Element ohne Slide-Effekt Override-Modus mit Methoden Jede der oben genannten Methoden akzeptieren auch 8216mode8217 als optionaler Parameter, so dass Sie alles, was in den Optionen gesetzt überschreiben. Fx. Slide-Shortcuts Die Fx. Slide-Klasse bietet auch einige praktische Shortcuts zum Hinzufügen des Effekts zu einem Element..set (8217slide8217) Statt eine neue Klasse zu initiieren, können Sie eine neue Instanz erstellen, wenn Sie 8217set8217 auf einem Element gleiten lassen. Einstelloptionen Mit der Tastenkombination können Sie sogar Optionen festlegen: Wenn die Folie. set () ist, können Sie sie mit der Methode. slide () starten. Folie akzeptiert: 8230each entsprechend den Methoden oben. Das 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 Ereignisse beobachten. Zunächst richten Sie die html. Nun, unsere css. Wir können es ziemlich einfach halten. Schließlich unsere Mootools Javascript: Hier ist einige Inhalte - A. Beachten Sie die Verzögerung vor onComplete Feuer. Dies ist aufgrund der Übergangseffekt, die onComplete wird nicht ausgelöst, bis das Dia-Element stoppt 8220elasticing.8221 Beachten Sie auch, dass, wenn Sie hin und her, wird es 8220cancel8221 den vorherigen Aufruf und geben die neue Priorität. Hier ist einige Inhalte - B. Beachten Sie, wie wenn Sie mich mehrere Male schnell I 8220chain8221 die Ereignisse klicken. Diese Folie ist mit der Option 8220link: 8216chain82178221 Hier ist etwas Inhalt - C Hier ist einige Inhalte - D. Beachten Sie, wie ich bin nicht in irgendwelche Ereignisse eingehakt. Dies geschah mit der. slide-Verknüpfung. Hier ist einige Inhalte - E Mehr erfahren8230 Fx. Slide ist ein vielseitiges und unglaublich nützliches Plugin. Weitere Informationen finden Sie in den Fx. Slide-Dokumenten. Die Fx. Morph - und Fx-Dokumente. Tomorrow8217s Tutorial wird einen Link, sobald es publishedelements - (Element) Das Element zu schieben. Optionen - (Objekt optional) Alle Fx-Optionen zusätzlich zu Modus und Wrapper. Mode - (string defaults to 39vertical39) Zeichenfolge, um anzugeben, welche Art von Schieben. Kann auf 39vertical39 oder 39horizontal39 eingestellt werden. Wrapper - (Element defaults to this. element) Ermöglicht das Festlegen eines anderen Elements als Wrapper. HideOverflow - (boolean default to true) setzt den Überlauf des Wrappers automatisch auf Überlauf, sonst erbt er von dem Element, das umbrochen wird. ResetHeight - (boolesche Standardwerte auf false) Setzt automatisch die Höhe des Wrappers zurück, wenn die Dia-Entfaltungsanimation abgeschlossen ist, wobei erlaubt wird, den Inhalt zu manipulieren, der es natürlich anpasst. Eigenschaften open - (boolean) Gibt an, ob das Schiebeelement sichtbar ist. Um den Dia-Effekt zu erzeugen, wird ein zusätzliches Element (das standardmäßig ein quotdivququot) um das gegebene Element gewickelt. Dieser Wrapper passt den Rand aus dem Element an. It39s Überlauf ist auf versteckt und es hat eine feste Höhe. Schiebt das Element horizontal oder vertikal.