Apple war schon immer Götter in Bezug auf die Art und Weise, wie sie sich und ihre Produkte präsentieren. Ich liebe die Sidebar auf der Apple-Startseite und wollte das Accordion-Plugin in der jQuery-Benutzeroberfläche verwenden, um dies zu erreichen! Als ob das nicht genug für mich wäre, möchte ich es auch nach Belieben zeigen und verstecken können. Ich zeige dir wie!

Vorwort

In diesem Lernprogramm wird davon ausgegangen, dass auf einem Server eine Wordpress-Engine ausgeführt wird, auf die Sie zugreifen können, um Dateien hochzuladen, Dateien herunterzuladen und zu durchsuchen. Wenn Sie einen lokalen Server auf Ihrem Computer mit einer WordPress-Installation ausführen möchten, finden Sie hier ein Tutorial für Windows und hier für OS X.

Dateien, die Sie brauchen.

Wir benötigen insgesamt 6 Dateien für dieses Tutorial:

• Functions.php - Dies wird eine kleine Codezeile enthalten, die unsere Seitenleiste registriert.
• index.php - Wir benötigen diese Datei auf jeden Fall. Jede Vermutung warum?
• jQuery - Hier ist Version 1.2.6 für Sie.
• jQuery UI (Akkordeon) - Wir benötigen nur das Accordion-Plugin und den UI-Core, nicht die gesamte UI-Bibliothek.
• sidebar.js - Enthält den gesamten jQuery-Code für die Seitenleiste.
• style.css - Wird benötigt, um das Design zu aktivieren, und enthält alle CSS.
• Bilderordner - Ich gebe Ihnen eine Liste von Bildern, um diese später im CSS-Teil etwas zu füllen. Im Moment benötigen wir jedoch nur ein Bild, das sich im HTML-Code befindet - das RSS-Symbol! Legen Sie es in den Ordner 'images' und los geht's!

Vergessen Sie nicht, Ihr Wordpress-Theme (das passenderweise als SidebarTheme bezeichnet werden sollte) in Dashboard zu aktivieren! Recht. Zum Tutorial! Wir fangen mit dem HTML und Wordpress an, das wir brauchen. Dazu gehört auch der strcutre, den wir brauchen. Dann füllen wir ihn mit dem Wordpress-Code auf, in dem die Beiträge angezeigt, registriert und unsere Seitenleiste angezeigt wird. Es sieht danach immer noch icky aus, also werden wir es mit ein paar hübschen CSS-Dateien verbessern, die es etwas an die Apple-Startseite erinnern und die Seitenleiste auch so aussehen lassen, als wäre sie apfelhaft. Wir machen das vor den JS, also sehen die ohne JS immer noch das hübsche Aussehen. Dann endlich mein Favorit - die jQuery. Wir werden es offen und geschlossen animieren und verwenden Akkordeon() und es sind Parameter, um den Hover-Effekt zu erzeugen.

Schritt 1 - HTML

Schnell aufmachen Functions.php, und steck das ein:

 'appleQuery')); ?>

Functions.php wird automatisch von PHP / Wordpress abgeholt und führt die Funktionen aus. Diese Funktion fordert Wordpress auf, eine neue Seitenleiste im Dashboard zu registrieren, um Widgets hinzuzufügen. Das ist aber noch nicht alles… Wir müssen das in unser Thema integrieren! Ich erkläre das nach dem HTML / Wordpress-Bit weiter. Das Array benennt nur die Sidebar, sodass wir in Dashboard auswählen können, welche Sidebar bearbeitet werden soll (nicht wirklich ein Problem….....

Kopieren oder geben Sie dies in Ihre index.html ein:

            
 
 
 
   
 
 
 
  Top-Geschichten  "title =" RSS 2-Feed "> 
  
  
"title ="">
 
  
 
   
 
  

Erläuterung

Ok… ich weiß das ist viel. Viel, viel. Dieses Tutorial konzentriert sich jedoch nicht speziell auf Wordpress und HTML, aber ich werde die Interessen herausgreifen, die Sie wahrscheinlich verstehen sollten.

• Das gesamte Seitenleisten-Segment - Dies ist der Hauptteil dessen, was wichtig ist. Was wir Wordpress fragen, ist das ob, in der gesamten lokalen WordPress-Engine die Funktion dynamische_seitenleiste ist anwesend (was es ist in Functions.php), führe die Funktion aus. Die appleQuery gibt den Namen der Seitenleiste an, der wir sie zugewiesen haben (in Functions.php, merken?).
• - Dies ist ein unbeschriebenes PHP, um das aktuelle Datum und die Uhrzeit des Benutzers wiederzugeben. Es ist nur hier, weil es bei Apple ist! Es hat das Format: (Monat TT, JJJJ 00:00 GMT).
• - Schau in den Kopf Element ... Siehst du dasselbe? Wieder ist es auf der Apple-Website. Es sind nur die XML-Einträge für das Blog.
• - Nichts Erstaunliches… Dies ist nur die Schaltfläche, mit der die Sichtbarkeit der Seitenleiste umgeschaltet wird. Ich habe es zu einer Zeitspanne gemacht, so dass es für JSless-Browser nicht anklickbar ist, aber die .click () - Funktion von jQuery kann Menschen mit JS verwenden!

Wenn also HTML und Wordpress aktiviert sind, würde ich vorschlagen, in Ihren WP-Admin zu gehen und Ihrem Blog einige Widgets hinzuzufügen. Aus irgendeinem Grund hat die Suche keinen Titel und das Tag-Cloud-Widget verschwindet nicht. Ich habe folgendes in meinem verwendet:

• Kategorien
• Archiv
• Links
• Seiten
• Meta

Und es sollte ungefähr so ​​aussehen: Irgendwie hässlich? Keine Angst, CSS ist hier!

Schritt 2 - CSS

Ja, fantastisches CSS ist hier, um den Tag zu retten! Wir möchten etwas daran erinnern (Photoshop-Modell):

Wie mein kleiner Unschärfeeffekt? Ich dachte, es passte… Wie auch immer. Die Unschärfe wird die JS sein, aber im Moment wollen wir alles erweitern und zeigen, damit die Seitenleiste bei 1% der intelligenten Cookies, für die JS nicht aktiviert ist, immer noch sichtbar ist und immer noch hübsch aussieht. Sehr, sehr groß, aber trotzdem da. Es ist ein großes Stück, also habe ich es in eine andere Datei gestellt, um diese Seite nicht zu füllen - Töte mich nicht! Kopieren oder tippen Sie dieses CSS in Ihr style.css. Sie benötigen all diese Bilder:

• activeBg.png
• h1.png
• inactiveBg.png
• sidebarClose.png
• sidebarOpen.png
• topStoriesBg.png

Einige Dinge zu beachten

• Ich habe mein Bestes getan, um die Ems in Bezug auf die Schriftgröße zu halten, daher verkleinern die 75% den gesamten Text auf 12px, was 1em wird. Das ist aber für ein anderes Tutorial!
• Im h1-Code habe ich 'text-shadow' verwendet. Dies ist CSS3. Es trägt nur zum ästhetischen Look bei!
• #Inhalt - Hat eine weiße Hintergrundfarbe. Warum fragst du? Der Hintergrund wird sowieso immer weiß sein, was ist der Punkt? Nun, meine Freunde, wenn wir zur jQuery kommen, brauchen wir #Inhalt um eine Decke für die Seitenleiste zu werden, und wenn kein Hintergrund festgelegt ist, wird sie transparent und zeigt die Seitenleiste an.
• #sidebarToggleButton - Das ist ein verdammter Name… Hiermit wird die Schaltfläche eingestellt, mit der die Sichtbarkeit der Seitenleiste korrekt eingestellt wird, aber für die JSless-Leute unsichtbar ist. Wenn wir uns dem JS zuwenden, werden die Hintergrundbilder angewendet, sodass sie nur für JS-Mitarbeiter angezeigt werden!

Diese drei Dinge sind nur die einzigen Macken. Ich habe diesen Code in FF, Safari 3 und Opera 9 getestet, und alles sieht perfekt aus! So sollte es aussehen:

Als nächstes müssen wir es jQueryfy.

Schritt 3 - jQuery Time!

Ich liebe jQuery! Ich liebe es, dass Sie Wörter so einfach in Code übersetzen können, und ich beginne immer damit, die Wörter zu tun. Hier ist eine grundlegende Vorstellung davon, was das Skript tun soll.

• Blenden Sie die Seitenleiste aus.
• Wenn Sie auf ".sidebarOpen" klicken, schalten Sie Folgendes um:
  • Entfernen Sie die Klasse 'SidebarOpen'.
  • Fügen Sie die Klasse 'sidebarClose' hinzu (die wir im nächsten Abschnitt formatieren werden)..
  • Animieren Sie die Seitenleiste, um sie von unten zu entfernen (wörtlich mit Position: relativ;)
  • Animieren Sie (dies), um die X-Pixelanzahl nach links zu verschieben (damit sie in einer Linie mit der Seitenleiste bleibt).
• Initiiere das Akkordeon.

Das scheint alles sehr viel zu sein (aber es ist wirklich nicht ...). Ich werde Sie Schritt für Schritt durchgehen. Öffnen Sie die von Ihnen erstellte Datei sidebar.js und anfangen zu tippen!

Schritt 3.1

Vergessen Sie nicht, alles in jQuery-Spezialdokument fertig zu packen:

$ (document) .ready (function () // jQuery-Code geht hier hin);

Legen Sie hier alles zwischen das Dokument ein!

Schritt 3.2

$ ("# sidebar"). css (left: "205px");

Dies "versteckt" die Seitenleiste, indem das CSS auf DOM-Ebene bearbeitet wird. Es ist nicht wirklich, es wird nur unter den Teppich gekehrt. Der wörtliche Teppich div # Inhalt. Das wird eigentlich nicht funktionieren, bis wir ein wenig mehr CSS hinzugefügt haben, aber ich werde nach diesem Abschnitt darauf eingehen.

Schritt 3.3

$ (". sidebarOpen"). toggle (function () $ (this) .removeClass ("sidebarOpen") .addClass ("sidebarClose") .animate (right: "205px", 500); $ ("# sidebar "). animate (left:" 0px ", 500);, function () $ (this) .removeClass (" sidebarClose ") .addClass (" sidebarOpen ") .animate (right:" 0px " , 500); $ ("# sidebar"). Animieren (links: "205px", 500););

OK, ich kann deine Verwirrung verstehen. Das ist viel für eine Schritt für Schritt Anleitung, oder ?! Nun ja… aber es sind eigentlich zwei sehr ähnliche Dinge. Die erste Funktion in der .Umschalten() werden:

• Entfernt die Klasse von 'sidebarOpen' (die Klassen sind für CSS im nächsten Abschnitt).
• Fügt die Klasse 'sidebarClose' hinzu.
• Animiert unseren kleinen Knopf, um nach links zu schieben:
• Die Seitenleiste gleitet selbst heraus und wird mit jQuery animiert. Beide werden für eine halbe Sekunde herauskommen, also sollten sie sich zusammen bewegen.

Die Sache ist, dass die zweite Funktion genau das ist, aber umgekehrt! Es:

• Entfernt die Klasse von 'sidebarClose'.
• Fügt die Klasse 'sidebarOpen' hinzu.
• Animiert unseren kleinen Knopf, um wieder rechts nach rechts zu schieben:
• Die Seitenleiste gleitet wieder hinein.

Sehen! Nicht so hart. Es ist nur eine Menge Code zum Nachlesen.

Schritt 3.4

Akkordeon Zeit! Yay! Wir können endlich die allgegenwärtige jQuery-Benutzeroberfläche verwenden. Die Art und Weise, wie sie das Widget entworfen haben, macht die Implementierung sehr einfach:

$ ("# sidebar ul"). Akkordeon (Header: 'h2', Ereignis: 'Mouseover', activeClass: 'selected');

Es ist nur die eine .Akkordeon() Funktion, angewendet auf die ul innerhalb des #Sidebar div. Die Parameter (einer pro Zeile) lauten wie folgt (ziemlich selbsterklärend ... Aber eh):

• Header - Dies definiert die Ziehpunkte der jeweiligen "Schublade" des Akkordeons. In unserem Fall die h2 jedes Widgets.
• Veranstaltung - Legt fest, wann Schubladen gewechselt werden sollen, und wir möchten den Hover-Effekt wie Apple verwenden Mouseover
• activeClass - Dies ist praktisch für das kleine Extra-CSS, das wir durchhalten werden. Es gibt der erweiterten Schublade eine Klasse "ausgewählt"..

Das ist alles JavaScript-Code, den wir brauchen. Es ist alles ziemlich unkompliziert und lässt sich leicht an Ihre Bedürfnisse anpassen!

Warum das so fantastisch ist

Ich glaube, das ist noch nicht genug verherrlicht worden! Das Erstaunliche an dem Akkordeon-Plugin ist, dass Sie keine der bearbeiten müssen Wordpress generiert Code, den wir nicht selbst formatiert haben (abgesehen von der Verpackung) ul, aber das ist trotzdem notwendig). Es ist nicht nur 100% unauffällig und 100% unabhaengig von bearbeitetem HTML-Code, sondern es ist auch eine kurze, schnelle Funktion. Akkordeon erledigt die ganze schmutzige Arbeit des Auswählens, Animierens, Aktivierens, Wechselns von Klassen usw. Es ist großartig! Betrachten Sie AccordionUI als verherrlicht! Sie sollten höchstwahrscheinlich etwas Ähnliches haben (ich habe das Akkordeon sehr leicht eingesetzt, damit Sie sehen können, wo es sein sollte):

Schritt 4 - jQuery CSS

Offensichtlich brauchen wir ein wenig mehr CSS, um all das zu erledigen, was jQuery für uns bedeutet. Dinge, die zusätzliches Styling benötigen, sind:

• #sidebarToggleButton - Mit den von jQuery zugewiesenen Klassen können wir nun die Bilder 'sidebarClose.png' und 'sidebarOpen.png', die ich zuvor gespeichert habe, sicher formatieren.
• Das Akkordeon braucht definitiv etwas Arbeit. Wir müssen die quadratischen Rahmen mit CSS3 korrigieren und die aktive Klasse formatieren.

/ * jQUERY CSS * / #sidebar> ul border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -opera-border-radius: 5px;  span.sidebarOpen background: url (images / sidebarOpen.png) no-repeat center;  span.sidebarClose background: url (images / sidebarClose.png) no-repeat center;  h2.selected Hintergrund: URL (images / activeBg.png) repeat-x! WICHTIG; Farbe: weiß! WICHTIG; 

Nur 2 Dinge zu beachten:

1. #sidebar> ul - Das heißt, das direkte ul Kind von #Sidebar bekommt die coolen abgerundeten Corders - noch Beta CSS3. Funktioniert jedoch in allen Mozilla-, Opera- und WebKit-basierten Browsern.
2. !WICHTIG - Dies ist erforderlich, um das zuvor gesetzte zu überschreiben - den grauen Standardhintergrund.

Und so, jetzt ist Ihre Endproduktshow so ziemlich wie folgt: (Klicken Sie für HTML-Version)

Einpacken

Deshalb haben wir in diesem Tutorial ein paar Sachen besprochen. Wir haben uns dynamische Sidebars angesehen. Eine Menge jQuery, um die Sidebar anzuzeigen und auszublenden, die ein Akkordeon in sich hat! In diesem Lernprogramm wurden zusätzliche Plugins für die Standard-jQuery (Wir haben die jQuery-Benutzeroberfläche integriert) und auch die dynamic_sidebar-Funktion verwendet.