Sexy animierte Registerkarten mit MooTools

Eine moderne, attraktive Möglichkeit, viel Inhalt auf kleinem Raum zu platzieren, ist die Verwendung eines Tab-Systems. In diesem Lernprogramm erfahren Sie, wie Sie ein sexy animiertes Registersystem mit CSS-Sprites, Cookies und animierten Registerkarten erstellen.

Annahmen

Es gibt einige Annahmen und Anmerkungen, die wir in dieses System einführen:

Wir verwenden die neueste Version von MooTools: 1.2.4.
Der Client muss JavaScript unterstützen.
Wir werden PHP für jedes serverseitige Scripting verwenden. Für jede serverseitige Sprache Ihrer Wahl gelten auch die entsprechenden Syntax / Methoden

Das Tutorial setzt auch Grundkenntnisse in Javascript voraus. Ein wenig Erfahrung mit MooTools oder JavaScript-Frameworks wird hilfreich sein.

Die Handlung

Wie wird dieses großartige System funktionieren? Hier ist die grundlegende Gliederung:

Wenn die Seite geladen wird, geben wir zwei UL-Listen mit Listenelementen aus: Die erste Liste enthält die Registerkarten, die zweite Liste enthält die Inhaltselemente der Registerkarten.
Für jeden Tab-Satz, den wir ausgeben, wird nach einem bestimmten Cookie gesucht, der uns sagen könnte, welcher Tab auf Grundlage des vorherigen Besuchs angezeigt werden sollte. Wenn kein Cookie vorhanden ist, nehmen wir die erste Registerkarte an.
Wenn der Benutzer auf eine Registerkarte klickt, wird das aktuelle Inhaltselement für diese Registerkarte außer Sicht und der Inhalt der neuen Registerkarte wird angezeigt.
Wir speichern den Index der Registerkarte in einem Cookie für zukünftige Ladezwecke (d. H. Wir möchten, dass die zuletzt angeklickte Registerkarte die erste ist, die auf der nächsten Seite / dem nächsten Besuch angezeigt wird.)

Das System selbst ist ziemlich kugelsicher. Wenn der Benutzer keine Cookies zulässt, ist der Startreiter für jede Liste immer 0.
Wenn keine JavaScript-Unterstützung vorhanden ist, werden die Registerkarten nicht angezeigt, da Folgendes angezeigt wird: none; sie anfangs.

Erster Schritt: Das HTML

Der HTML-Code für das Tab-System und die entsprechenden Inhaltselemente ist unglaublich einfach aufgebaut.

   Tab 1
 Tab 2
 Tab 3
 Tab 4
 
 
  Dies ist der Inhalt von Tab 1.
 Dies ist der Inhalt von Tab 2.
 Dies ist der Inhalt für Tab 3.
 Dies ist der Inhalt von Tab 4.

Wir werden den obigen HTML-Code später in diesem Tutorial mit PHP modifizieren, um ein robusteres System zu schaffen.

Zweiter Schritt: CSS

Wie bei jeder CSS- und HTML-Kombination können Sie die Registerkarten und ihre Inhaltselemente beliebig gestalten.
Ich habe mich für die Verwendung von CSS-Sprites im Facebook-Stil für meine Beispielregisterkarten entschieden.
Stellen Sie fest, dass Sie die folgenden Elemente auf eine bestimmte Art und Weise gestalten möchten, damit das System funktioniert:

Die Inhaltselemente der Registerkarte müssen eine Höhe von 0 haben und ihr Überlauf ist ausgeblendet. Auf diese Weise können alle Inhaltselemente beim Laden der Seite sozusagen "ausgeblendet" werden.
Zwischen den CSS-Selektoren "ul.tabs li a" und "ul.tabs li a.active" müssen Sie dem "active" -selektor ein anderes Aussehen zuweisen, damit der Benutzer die derzeit ausgewählte Registerkarte kennt.

 / * tabs Struktur * / .tab-container width: 320px; Hintergrund: #eee; Polsterung: 5px 10px;  ul.tabs list-style-type: none; Marge: 0; Polsterung: 0;  ul.tabs li float: left; Marge: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; Rahmen: 1px fest #ddd; Schriftdicke: fett; Hintergrund: URL (tab-sprite.jpg) 0 0 repeat-x; Farbe: # 000; Textdekoration: keine;  ul.tabs li a.active border-color: # 028433; Hintergrundposition: 0 -96px; Farbe: #fff;  / * Sprite! Tausch der Hintergrundposition * / ul.tabs li a.active: hover Textdekoration: keine; Cursor: Standard;  ul.tabs li: hover Textdekoration: Unterstreichung;  ul.tabs-content margin: 10px 0 0 0; Polsterung: 0;  ul.tabs-content li height: 0; Überlauf versteckt; Marge: 0; Polsterung: 0;  / * löscht Floats * / div.clear clear: both;  / * dh korrigiert * / * html ul.tabs-content li float: left;  / * ie6 * / * + html ul.tabs-content li width: 99%; Schwimmer: links;  / * ie7 * /

Beachten Sie, dass einige Internet Explorer-spezifische Korrekturen implementiert werden müssen. hässlich, aber notwendig.

Dritter Schritt: Das MooTools-Javascript

Einer der großen Vorteile von MooTools ist das leistungsstarke Class-System.
MooTools-Klassen ermöglichen flexible, organisierte und erweiterbare Funktionen.
Unsere MooTools-Klasse wird "TabSet" genannt. Da führt die TabSet-Klasse viele Aktionen aus,
lässt jeden Teil der Klasse aufschlüsseln.

Die erste Zeile gibt der Klasse immer einen Namen:

 / * der Klasse einen Namen geben * / var TabSet = new Class (

Als Nächstes müssen wir ein Objekt erstellen, das die Optionen unserer Klasse enthält:

 Optionen: // Standard-Tab-Optionen activeClass: 'active', // css class cookieName: ", // kein Name bedeutet kein Cookie cookOptionen: // Optionen für das Cookie, wenn das Cookie die gewünschte Dauer hat: 30, // 30 Tage Pfad: '/', startIndex: 0 // Beginne mit diesem Element, wenn kein Cookie oder aktiv ist,

Unsere Optionen erlauben uns zu definieren:

activeClass: Die CSS-Klasse, die der aktuell ausgewählten (oder "aktiven") Registerkarte zugewiesen werden soll.
cookieName: Der Name des Cookies, das dieses Registerkartenset darstellt. Wenn Sie keinen Cookie-Namen definieren, werden keine Cookies verwendet.
cookieOptions: Ein Objekt, das die Optionen für das Cookie enthält.
startIndex: Die zu aktivierende Registerkarte. Beginnt mit 0. Wird von der Variable activeClass überschrieben, wenn ein Cookie gefunden wird.

Mit nur drei Optionen in der Klasse wird TabSet als relativ einfache Klasse betrachtet.

Als Nächstes implementieren wir zwei Optionen und Ereignisse:

 Implementiert: [Optionen, Ereignisse],

Durch die Implementierung von Optionen und Ereignissen können wir gegebene Optionen und korrekt behandeln
feuere benutzerdefinierte Lade- und Änderungsereignisse in unseren Listen an einer beliebigen Stelle in der Klasse.

Als Nächstes definieren wir die "initialize" -Methode, die beim Erstellen jeder Instanz der Klasse ausgeführt wird:

 initialize: function (Registerkarten, Inhalt, Optionen) // Handle-Argumente this.setOptions (Optionen); // mische die angegebenen Optionen mit den Standardoptionen this.tabs = $$ (tabs); // Speichern der angegebenen Tabs innerhalb der Klasse this.contents = $$ (Inhalt); // speichere den angegebenen "Inhalt" innerhalb der Klasse // Ermittle den "aktiven" Tab var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); // den Index festlegen, der anfangs aktiv sein soll this.activeTab = this.tabs [active] .addClass (this.options.activeClass); // Identifiziere jetzt die "aktive" Registerkarte this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // Identifizieren Sie den "aktiven" Inhalt. // Führen Sie jede Tab / Content-Kombination durch die "processItem" -Methode aus. Diese wird unter this.tabs.each (Funktion (tab, i) this.processItem (tab, this.contents) angezeigt [i], i);, dies); // Registerkarten sind bereit - lösen Sie das Ladeereignis aus! this.fireEvent ('load'); ,

Als nächstes kommt die workhorse-Methode unserer TabSet-Klasse: processItem:

 processItem: Funktion (Tab, Inhalt, i) var contentHeight = content.getScrollSize (). y; // füge ein click -Ereignis zum Tab tab.addEvent hinzu ('click', function () // wenn es nicht das aktive Tab ist, wenn (tab! = this.activeTab) // stopper if (e) e.stop ( // die aktive Klasse von der aktiven Registerkarte entfernen this.activeTab.removeClass (this.options.activeClass); // die angeklickte Registerkarte zur aktiven Registerkarte machen (this.activeTab = Registerkarte) .addClass (this.options.activeClass) ; // Tween den alten Tab-Inhalt hoch // Tween den neuen Inhalt nach unten this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween ', onComplete: $ empty). tween (' height ', contentHeight); // das Tab-Änderungsereignis this.fireEvent (' change ', [tab, content]); .bind (this) auslösen. setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // Speichern des Index für Cookie if (this.options.cookieName) Cookie.write ( this.options.cookieName, i); .bind (this)); );

Im Folgenden wird die grundlegende Vorgehensweise der processItem-Methode beschrieben:

Akzeptiert eine übereinstimmende Registerkarte, ein Inhaltselement und dessen Index…
Berechnet die Höhe des Inhaltselements.
Fügt der Registerkarte ein Klickereignis hinzu, das:
1. Stellt fest, dass diese Registerkarte nicht bereits aktiv ist (wir möchten nichts animieren oder ändern, wenn sie auf die bereits aktive Registerkarte klicken).
2. Entfernt die "aktive" CSS-Klasse aus der aktuellen Registerkarte und fügt sie der gerade angeklickten Registerkarte hinzu.
3. Verschiebt den Inhalt der aktuellen Registerkarte und zeigt den neuen Inhalt an. Das "change" -Ereignis wird ausgelöst, wenn die Animation abgeschlossen ist.
4. Speichert den Index der neuen Registerkarte im Cookie, sodass die neue Registerkarte zunächst ausgewählt wird, wenn der Benutzer die Seite neu lädt oder zu einer anderen Seite wechselt.

Und jetzt ein Beispiel für unsere Klasse:

 window.addEvent ('domready'), function () var tabset = neues TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo-list'); );

Wir stellen unserer Instanz die Registerkarte LI A und die Inhalts-LI zur Verfügung. Wir bieten auch das optionale Optionsargument an. So einfach ist es, diese Klasse zu benutzen! Hier ist die komplette Klasse mit Verwendung:

 / * class * / var TabSet = neue Klasse (Optionen: activeClass: 'active', // css class cookieName: ", cookieOptions: duration: 30, // 30 Tage Pfad: '/', startIndex: 0 // Beginne mit diesem Element, wenn kein Cookie oder aktiv, Implements: [Optionen, Ereignisse], Initialize: Funktion (Registerkarten, Inhalt, Optionen) // Argumente this.setOptions (Optionen); this.tabs = $$ ( tabs); this.contents = $$ (Inhalt); // Bestimmen der Registerkarte "aktiv" var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = this. tabs [active] .addClass (this.options.activeClass); this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // verarbeitet jeden Tab und den Inhalt this.tabs.each (Funktion (tab, i) this.processItem (tab, this.contents [i], i);, this); // Tabs sind bereit - laden Sie sie! this.fireEvent ('load');, processItem: function (tab, content, i) var contentHeight = content.getScrollSize (). y; // fügt dem Tab tab.addEvent ein Klickereignis hinzu ('click', function (e) // stop! if (e) e.stop (); // wenn es nicht das ist aktive Registerkarte if (tab! = this.activeTab) // Entferne die aktive Klasse von der aktiven Registerkarte this.activeTab.removeClass (this.options.activeClass); // Die angeklickte Registerkarte zur aktiven Registerkarte machen (this.activeTab = Registerkarte) .addClass (this.options.activeClass); // Tween zwischen dem alten Tab-Inhalt hoch // Tween dem neuen Inhalt nach unten this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween') , onComplete: $ empty). tween ('height', contentHeight); // das Tab-Änderungsereignis auslösen this.fireEvent ('change', [tab, content]); .bind (this). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // Speichern des Index für Cookie if (this.options.cookieName) Cookie.write (this.options.cookieName, i, this.options.cookieOptions);  .bind (this)); ); / * usage * / window.addEvent ('load', function () var tabset = neues TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li')), cookieName: 'demo- Liste' ); );

Vierter Schritt: PHP / HTML

Erinnern Sie sich noch, wie ich sagte, wir würden unseren ursprünglichen HTML-Code mit PHP ändern? Jetzt ist die Zeit. Seit wir kann
Wenn Sie ein Cookie für unser TabSet gesetzt haben, sollten wir dies bei der Ausgabe des Registers HTML feststellen.
Warum? Weil wir möchten, dass die Registerkarten problemlos geladen werden. Wir möchten auch für Benutzer geeignet sein, für die JavaScript oder Cookies nicht aktiviert sind.
Ohne dieses PHP können Sie einen leichten "Sprung" im aktiven Inhaltsbereich feststellen.

    " > Tab 1
 " > Tab 2
 " > Tab 3
 " > Tab 4
 
 
  > Dies ist der Inhalt für Registerkarte 1. Dies ist der Inhalt für Registerkarte 1. Dies ist der Inhalt für Registerkarte 1. Dies ist der Inhalt für Registerkarte 1. Dies ist der Inhalt für Registerkarte 1. Dies ist der Inhalt für Registerkarte 1. Dies ist der Inhalt ist der Inhalt für Registerkarte 1. Dies ist der Inhalt für Registerkarte 1.
 > Dies ist der Inhalt der Registerkarte 2. Dies ist der Inhalt der Registerkarte 2. Dies ist der Inhalt der Registerkarte 2. Dies ist der Inhalt der Registerkarte 2. Dies ist der Inhalt der Registerkarte 2. Dies ist der Inhalt der Registerkarte 2. Dies ist der Inhalt ist der Inhalt für Registerkarte 2. Dies ist der Inhalt für Registerkarte 2.
 > Dies ist der Inhalt für die Registerkarte 3. Dies ist der Inhalt für die Registerkarte 3. Dies ist der Inhalt für die Registerkarte 3. Dies ist der Inhalt für die Registerkarte 3. Dies ist der Inhalt für die Registerkarte 3. Dies ist der Inhalt für die Registerkarte 3. Dies ist der Inhalt ist der Inhalt für Registerkarte 3. Dies ist der Inhalt für Registerkarte 3.
 > Dies ist der Inhalt der Registerkarte 4. Dies ist der Inhalt der Registerkarte 4. Dies ist der Inhalt der Registerkarte 4. Dies ist der Inhalt der Registerkarte 4. Dies ist der Inhalt der Registerkarte 4. Dies ist der Inhalt der Registerkarte 4. Dies ist der Inhalt ist der Inhalt für Registerkarte 4. Dies ist der Inhalt für Registerkarte 4.

Schritt 5: PHP: Anpassung für Benutzer ohne Javascript oder Cookies

Einige Benutzer aktivieren JavaScript oder Cookies aus Sicherheitsgründen nicht. Wir möchten trotzdem, dass unser System für sie funktioniert. Wenn Sie sich vom vorherigen Codeblock abrufen,
Wir verwenden Verknüpfungen mit einem Abfrageschlüssel der "Demo-Liste", um eine Änderung der Registerkarte anzuzeigen. Der folgende PHP-Block oben auf der Seite (vor jeder Ausgabe) wird angezeigt
helfen Sie uns, den Cookie-Wert auf die angeforderte Registerkarte zu ändern.

Beachten Sie, dass wir die Seite nur aktualisieren, wenn Sie überprüfen können, ob der Cookie gesetzt wurde. Wenn der Cookie nicht gesetzt wurde, werden die Cookies des Benutzers deaktiviert.

Mission erfüllt!

Hier eine kurze Zusammenfassung der Vorteile der MooTools TabSet-Klasse:

Unsere Klasse implementiert Events, damit wir benutzerdefinierte Events und Event-Handler erstellen können.
Das Layout des gesamten Systems wird vollständig durch einfaches HTML und CSS gesteuert.
Die Verwendung von Cookies zur Erinnerung an den vorherigen Tab ist eine erhebliche Verbesserung der Benutzerfreundlichkeit.
Die Klasse, in der es sich um eine MooTools-Klasse handelt, ermöglicht eine einfache Implementierung von Projekt zu Projekt.

Die Inline-MooTools-Javascript

Ich habe immer befürwortet, eine gewünschte MooTools-Funktionalität "inline" zu codieren, bevor sie in eine Klasse umgewandelt wird. Hier ist der Inline-Code von MooTools JavaScript:

 $$ ('ul.tabs'). each (Funktion (tabList)) // Abrufen der Inhaltsliste var tabContentList = tabList.getNext ('ul.tabs-content'), // den Namen des Cookies abrufen, der der Name ist das "title" -Attribut der Tab-Liste cookie = 'Demo-Liste', // der Start-Tab-Index startIndex = Cookie.read (cookie) || 0, // Liefert die aktuellen Tab LI-Elemente tabs = tabList.set (' title ', "). getElements (' li '), // LI = tabContentList.getElements (' li '), // den Inhalt der LI-Elemente abrufen, // die aktuell aktive Registerkarte (LI) ('active'), // das aktuell aktive Content-LI activeContent = lis [startIndex] .setStyle ('height', 'auto'); // für jeden Tab innerhalb dieser Tab / Content-Beziehung ... tabs.each (Funktion (tab, i) // stopper if (e) e.stop (); // berechnet die Höhe des jeweiligen Inhaltselements var var = lis [i], contentHeight = content.getScrollSize (). y; // fügt den Klick hinzu Ereignis auf die Registerkarte, die… tab.addEvent ('click', function () // wenn es sich nicht um die aktuell aktivierte Registerkarte handelt ... if (tab! = activeTab) // hinzufügen und entfernen die aktive Klasse von der alten vs. neuen Registerkarte activeTab.removeClass ('active'); (activeTab = tab) .addClass ('active'); // Wischvorgang starten, Effekt abwischen activeContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ empty). tween ('height', contentHeight);.) setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', '0'); // schreibe an Cookie Cookie.write (Cookie, i); //Flosse! ); ); // feuere Klickereignis activeTab.fireEvent ('click'); );

Beachten Sie, dass alle "var" -Anweisungen oben Argumente oder Optionen für die Klasse sind. Der Übergang von Inline-MooTools-JavaScript zu einer Klasse ist äußerst einfach!

Habe Verbesserungsideen?

Haben Sie weitere Ideen für diese Klasse? Teilen Sie sie unbedingt in den Kommentaren unten mit!

Schreibe ein Plus-Tutorial

Wussten Sie, dass Sie bis zu 600 US-Dollar verdienen können, wenn Sie ein PLUS-Tutorial und / oder einen Screencast für uns schreiben? Wir suchen ausführliche und gut geschriebene Tutorials zu HTML, CSS, PHP und JavaScript. Wenn Sie die Möglichkeit haben, wenden Sie sich bitte an Jeffrey unter [email protected].

Bitte beachten Sie, dass die tatsächliche Kompensation von der Qualität des abschließenden Tutorials und des Screencasts abhängt.

Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.

Code