Verwenden des wunderbaren jFlow-Plugins

Es scheint, dass die Obsession der Webdesign-Industrie im Moment die Möglichkeit ist, einen "vorgestellten Abschnitt" zu erstellen. Es hat zwar schon einmal viel Geschicklichkeit erfordert, aber das ist nicht mehr der Fall. In diesem Screencast zeige ich Ihnen, wie Sie auf einfache Weise einen scrollbaren, hervorgehobenen Abschnitt erstellen können, indem Sie eines der beliebten Themenwelten von Theme Forest als Referenz verwenden. Lass uns hineingehen!

* Tut mir leid wegen der nicht perfekten Audioqualität. Ich wollte mir diese Woche ein Kondensatormikrofon zulegen, aber ich war super beschäftigt. Ich verspreche, dass das so schnell wie möglich erledigt wird. Wenn Sie daran interessiert sind, Video-Tutorials für uns zu erstellen, senden Sie mir eine E-Mail an [email protected].

Sie können das Thema von Justin hier ansehen und kaufen.

Laden Sie das Plugin herunter

Wie immer bei einem neuen Plugin ist der erste Schritt, die Website des Erstellers zu besuchen und das Plugin herunterzuladen. Sie benötigen lediglich eine kleine Javascript-Datei - und natürlich eine Kopie der jQuery-Kernbibliothek. Nehmen Sie sich ein paar Minuten Zeit, um die Konzepte durchzugehen. Sie werden staunen, wie einfach die Implementierung ist, relativ gesehen (oder tippen?)..

Implementierung

Nachdem Sie die Javascript-Datei auf Ihrer Festplatte gespeichert haben, importieren Sie sie wie in einer neuen Webanwendung.

* Beachten Sie, dass Sie die Core-Bibliothek vor jFlow importieren sollten. Andernfalls werden einige offensichtliche Fehler angezeigt!

Um das jFlow-Plugin verwenden zu können, müssen Sie die Funktion einiger IDs und Klassen kennen.

div # controller: Dieses Element dient als "Haken" beim Aufruf unserer jQuery.
.jFlowControl: Diese Bereiche werden Kinder des #controller div sein. Für beliebig viele Folien müssen Sie mit dieser Klasse verknüpfte span-Tags erstellen. Wenn ich beispielsweise fünf Folien hatte, muss ich fünf Tags mit der Klasse .jFlowControl haben. Sie werden dies in Kürze mehr am Beispiel verstehen.
div # Folien: Innerhalb des Foliendivs müssen Sie zusätzliche Divs verschachteln, die den gewünschten Inhalt für jede "Folie" enthalten. Mehr dazu später.
.jFlowPrev, .jFlowNext: Diese beiden Klassen ermöglichen es Ihnen, mit der nächsten Folie fortzufahren oder umgekehrt.

Beispiel für ein HTML-Dokument

   Nr. 1  Nr. 2  Nr. 3  
    
  Hier ist ein vorgestellten Bild. nett!
 Hier ist ein weiteres gepflegtes Bild. nett!
 Hier ist ein letztes sehr cooles Bild. nett!

Lass uns das ein bisschen durchgehen.

Wie bei den meisten Seiten haben wir unseren gesamten Inhalt in ein "Wrap" -Element verpackt. Dies ist rein aus ästhetischen Gründen. Es ist nicht erforderlich.
In meinem Controller div (der der Haken für jFlow ist) habe ich drei span-Tags mit der Klasse "jFlowControl" hinzugefügt. Stellen Sie sich diese Bereiche als Registerkarten vor. Wenn Sie auf "No 3" klicken, wird schnell zum dritten zugehörigen Zyklus gewechselt "rutschen". Denken Sie daran, dass die Anzahl der Span-Tags, die Sie verwenden, der Anzahl der Divs in Ihrem "Slide" -Div entsprechen muss. Beachten Sie, dass beide drei haben.
Nun kommen wir zu einem Div mit der ID "prevNext". Dies ist keine Schlüssel-ID. Ich hätte es Rick nennen können, wenn ich wollte. Es ist einfach ein Wrapper div, mit dem ich steuern kann, wo meine Schaltflächen "Weiter" und "Zurück" auf der Seite angezeigt werden. Der Klassenname der Bilder ist jedoch wichtig: 'jFlowPrev', 'jFlowNext'.
Zum Schluss kommen wir zum "Slides" div. In diesem Div legen wir Kinder-Divs an. Jedes dieser Kinder dient als "Tab".. Beachten Sie noch einmal, dass ich, wenn ich ein viertes Bild hinzufügen wollte, auch ein zusätzliches "jFlowControl" span-Tag innerhalb des Steuerelements div benötigen würde.

jQuery

Der Code, den wir schreiben müssen, ist ziemlich einfach. Zuerst das letzte Skript durchsehen und dann werde ich jede Zeile durchgehen.

 $ (function () $ ("# controller"). jFlow (Folien: "#slides", Breite: "980px", Höhe: "313px", Dauer: 600););

Das ist es!. Zunächst warten wir, wann das Dokument zum Durchlaufen bereit ist. Dann packen wir unser Controller div und rufen die "jFlow" -Methode auf. Es stehen viele Parameter zur Verfügung, aber wir verwenden nur einige.

Folien: Es fragt: "Wie heißt das div-Element, das jede Folie oder jedes Register enthält? Wir werden es mit den entsprechenden" folien "div verbinden, die ich zuvor erstellt habe. Sie können es jedoch ändern, wenn Sie möchten.
Breite Höhe: Diese sind erforderlich. In diesem Beispiel verwende ich nur Bilder. Als Ergebnis habe ich die Werte für Breite und Höhe den Bildern der Bilder gleichgesetzt.
Dauer: Wie lange soll der Übergang von Folie zu Folie dauern, in Millisekunden? Ich habe 600 eingestellt - was ungefähr eine halbe Sekunde ist.

Du bist fertig

Die einzige andere Sache, die Sie implementieren möchten, ist CSS-Stil. JFlow funktioniert jedoch auch einwandfrei. Das wäre natürlich nur aus ästhetischen Gründen. Wenn Sie mehr Informationen wünschen, besuche ich das Styling im Screencast etwas mehr.

Das oben gezeigte Layout ist absichtlich einfach. Ich überlasse es Ihnen, sich die verschiedenen Verwendungsmöglichkeiten vorzustellen!

Vor einigen Wochen hat Chris Coyier ein Tutorial für ein ähnliches Plugin erstellt - "codaSlider". Ich habe das Plugin in einigen Projekten persönlich verwendet, jedoch ist jFlow viel einfacher und benutzerfreundlicher. In beiden Fällen sind beide leistungsstarke Plugins. Verwenden Sie sie weise.

Abonnieren Sie die wöchentlichen Screencasts

Sie können unseren RSS-Feed Ihren ITUNES-Podcasts hinzufügen, indem Sie folgende Schritte ausführen:

Klicken Sie nach dem Laden von ITUNES auf die Registerkarte "Erweitert".
Wählen Sie "Podcast abonnieren"
Geben Sie "http://feeds.feedburner.com/NETTUTSVideos" ein.

Das sollte es tun! Der Screencast wird in den nächsten 24 Stunden auch auf ITUNES abrufbar sein.

Zusätzliche Ressourcen

jFlow Plugin

Dies ist die Homepage des jFlow-Plugins. Sie erhalten dann einen Einstieg in die Javascript-Datei und einige hilfreiche Beispiele.

Besuche die Website
ThemeForest

Wenn Sie mehr erfahren oder einfach etwas zusätzliches Geld verdienen möchten, sollten Sie unbedingt ThemeForest.net besuchen.

Besuche die Website
Dynamischer Spaß mit Simple Pie und jQuery - Tutorial zum Coda-Schieberegler

Schauen Sie sich ein weiteres jQuery-Plugin an, das eine ähnliche Funktion ausführt. In diesem Tutorial zeigt Chris Coyier, wie Sie das Coda Slider-Plugin implementieren können, um eine schöne Blogroll zu erstellen.

Artikel lesen

Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.

Code