Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Wie kann man einen atemberaubenden jQuery Style Switcher erstellen

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Tutorial zeige ich Ihnen, wie Sie mit jQuery und PHP einen stilvollen Switcher erstellen können.  Das Endergebnis ist ein unaufdringlicher und anpassungsfähiger stilvolles Switcher, der schnell und einfach zu bedienen ist.

Schritt 1: Der HTML-Code

Zuerst müssen wir unsere grundlegende HTML-Datei erstellen und sie als index.php speichern:

Sie werden sehen, dass es ein PHP-Code, der gerade unter dem Titel-Attribute im Header der Seite befindet. Es ist sehr einfach - alles, was hier los ist, ist dies ein Test für das Vorhandensein von Cookies «style» genannt ist - wenn es vorhanden ist, ist es an die aktuellen Variablen zugewiesen wird (auch als «style»), und wenn das Cookie nicht vorhanden ist, das Thema vorbelegt ("day") auf die Variable $style. Dann wird diese Variable in den href Attribut-Referenzen genannt werden (href="css/.sss"/?php echo $style?>.css").

Sie werden sehen, dass die Div-Style-Switcher-Ebene oben in unserem HTML-Code angezeigt wird. Keine Notwendigkeit, fügen Sie es mit Hilfe von JavaScript, da die Methode, die wir verwenden, um den Schalter zu Arbeitsstil ermöglicht es, auch wenn JavaScript deaktiviert ist. Zwei Links (und Day und Night) führen direkt in eine Datei namens style-switcher.php mit zusätzlichen Zeichenfolge in der Abfrage ein relevantes Thema zu definieren (z.B. href=„style-switcher.php?style=day“).

Ich habe das Plugin auch für jQuery styleSwitcher benannt. Es ist noch in der Entwicklungsphase (na ja, sind wir für den Moment gemacht, wenn Sie den Artikel zu lesen), so halten Sie auf! ...  Wir werden dieses Plugin in Schritt 4 der Lektion schreiben.

Schritt 2: CSS

Jetzt müssen wir ein paar CSS-Stylesheets für unseren HTML-Code erstellen. Ich habe beschlossen, nur zwei Tabelle zu schaffen - du wirst das Thema "Day" haben, und das andere wird das Thema "Night" haben, und ich habe sie entsprechend genannt. (day.css & night.css) 

Day Thema 

Night ThemeNight ThemeNight Theme

Night Thema

Night ThemeNight ThemeNight Theme

Es empfiehlt sich, einen Stil zu erstellen und dann alle Selektoren in eine andere Tabelle zu kopieren. Alles, was Sie ändern müssen, ist das Hinzufügen anderer CSS-Regeln und -Konstrukte. Natürlich können Sie so viele Tabellen haben, wie Sie möchten, aber in dieser Lektion verwenden wir nur zwei.  Darüber hinaus sind day und night gut kombiniert!

day.css:

night.css:

In der Tatsache ist es keine CSS-Lektion, daher werde ich nicht auf alle Fragen antworten, aber wenn Sie sie haben, zögern Sie bitte nicht, sie in den Kommentaren zu stellen. Und ja, ich weiß, dass die Eigenschaft min-width in älteren Browsern nicht unterstützt wird!  ;)

Schritt 3: style-switcher.php

Hier schreiben wir die Grundfunktionen des Style-Switches. In der Tat sind dies nur ein paar Zeilen von sehr einfachem PHP-Code. Sie müssen eine neue Datei namens "style-switcher.php" erstellen und folgendes hineinkopieren:

Der obige Code weist also der Variablen $ style den Wert der Variablen GET $style zu. Mit anderen Worten, das Skript übernimmt den Wert der style-Eigenschaft aus der Abfragezeichenfolge (style-switcher.php? style =day).  Dann erstellt er einen Cookie (für eine Woche), genannt "style" - wir können diesen Cookie über unsere Hauptindex.php-Datei mit dem in Schritt # 1 erstellten Code anfordern (denken Sie daran, das ist ein kleiner Teil des PHP in head?). Das Skript überprüft dann, ob "js" zur Abfragezeichenfolge hinzugefügt wurde. Wenn dies der Fall ist, erfahren wir, dass die Anfrage mit JavaScript (das wir noch nicht erstellt haben) aufgetreten ist. Die else-Bedingung ist erfüllt, wenn der Benutzer JavaScript nicht aktiviert und die Umleitung verwendet (dh die Seite, von der sie gerade stammt) - sie wird klarer, sobald wir den jQuery-Code schreiben!

Schritt 4: Der jQuery-Code

Wenn du willst, kannst du hier aufhören! ... Unsere Lösung wird gut funktionieren, aber wie ich in der Einleitung gesagt habe, werden wir es mit jQuery noch steiler machen! Wir werden nicht nur dem Benutzer erlauben, sein Thema zu ändern, ohne die Seite zu aktualisieren, sondern wir werden auch einen coolen Fading-Effekt hinzufügen ...  Ich meine, was wäre das für die Lektion von jQuery ohne den Effekt des Verblassens!?!?

Dies ist alles möglich, ohne ein Plug-in zu erstellen, aber ich denke, dass dies für alle von Ihnen eine gute Übung sein wird, und ermöglicht Ihnen auch, den Code schnell und einfach anzupassen und weiterzugeben.

Zuerst erstellen wir eine Datei namens "styleswitcher.jquery.js".

Das Erstellen eines neuen Plugins in jQuery ist sehr einfach. Sie müssen nur den folgenden Code schreiben:

Also zuerst wollen wir festlegen, was passiert, wenn Sie einen der Links-Stylesheets drücken (dh diejenigen Verbindungen, die in der Schicht aus div#style-switcher sind):

loadStyleSheet:

Jetzt müssen wir die Funktion loadStyleSheet schreiben:

Ich hoffe, dass die Kommentare diesen Prozess ausreichend erklärt haben.  Sie werden feststellen, dass wir im Moment eine undefinierte Funktion aufrufen (cssDummy.check()).  Aber mach dir keine Sorgen, darüber im nächsten Schritt ...

cssDummy:

Wir brauchen einen Weg, um zu überprüfen, ob das Stylesheet geladen ist.  Wenn dies der Fall ist, verstecken wir die überlappende Ebene, aber wenn dies nicht der Fall ist, müssen wir die Überprüfung fortsetzen, bis sie startet. Ich habe im Netzwerk eine zuverlässige Testmöglichkeit gefunden. Es beinhaltet die Überprüfung der Breite des Dummy-Elements.  Die Breite des Elements in CSS bestimmt werden - und somit wird die Zellenbreite auf die Breite in der CSS definiert gleich sein, wenn die Tabelle geladen. Ich hoffe, Sie werden jetzt verstehen, warum wir die "# dummy-element" -Regel in jede CSS-Datei einfügen mussten ...

Also, hier ist es:

Am Ende unseres Plugins rufen wir die Funktion  cssDummy.init auf.

Alles ist fertig! Jetzt sieht das Plugin so aus:

Wir können das jQuery-Plugin wie folgt aufrufen:

Ende!

Wenn Sie sich über die Dateistruktur nicht sicher sind, laden Sie die Quelldateien herunter, um sie zu sehen.  Ich hoffe, dir hat dieses Tutorial gefallen. Wie immer, wenn Sie Fragen haben, zögern Sie nicht, sie in den Kommentaren zu fragen!  Wenn Ihnen unser Artikel gefallen hat, teilen Sie ihn bitte mit Digg!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.