Mootools Styleswitcher (Deutsch)

UK logo
Ich habe mich schon die ganze Zeit gefragt, ob es niemand im Internet gibt, der die Mootools-Eigenschaften für einen CSS-Styleswitcher wie der von Paul Sowden benutzt. Also habe ich mal probiert, dieses selber zu programmieren.

Die Grundidee ist eigentlich ganz einfach. Im Mootools-Framework gibt es die Funktion Asset.CSS. Mit dieser Funktion können alle CSS-Eigenschaften und auch der Stil bzw. die CSS-Datei dynamisch
getauscht werden. Das ist auch relativ einfach.

Ein weiterer Punkt ist aber, dass der Besucher beim nächsten Besuch der Seite den gewählten Style sofort wieder lädt, also nicht erneut den "Styleswitcher" benutzen muss. Dazu speichert man am besten den gewählten Style in einem Cookie. Die Funktionen zum Auslesen und Speichern des Cookies sind auch im Mootools-Framework vorhanden.

Die Aufgabe besteht also nur darin, diese beiden Techniken zu verbinden. Diese Vorgehensweise habe ich hier mal beispielhaft dargestellt.

a. Html-Code im Kopf-Bereich des html-Dokumentes

b. Javascript-Code im Kopf-Bereich des html-Dokumentes


c. Html-Code im Body-Bereich des html-Dokumentes



d. Die Parameter der Funktion styleswitch sind:

  • mode:set = Festhalten des Wertes in einem Cookie, noset = Nur ausprobieren
  • setstyle:Name des Stylesheets, ohne Dateiendung.
    Der Pfad wird im Script-Teil festgelegt. Die Endung *.css erfolgt durch das Script.

e. Beispiel:

Hier geht es zur Test-Seite


f. Download

Datei styleswitcher_0.95.zip [22.8kb]
Beschreibung Styleswitcher 0.95
Letztes Update 19. Juni 2007, 18:00

g. Zusätzliche Hinweise

Vom Mootools Framework werden folgende Module (Core, Element, Window.DomReady, Cookie, Assets) benötigt, die Du hier herunterladen kannst!

Die Funktionalität und diese Seite wurden mit Internet Explorer 7.0, Firefox 2.0 und Opera 9.2 getestet.

Wenn Du noch Verbesserungen / Optimierungen hast, oder Fehler findest, schreibe mir einfach eine Mail

Ich benutze den Syntaxhighlighter von Google.

© Achim Mensching 2017
Verwaltung | Site Map | Impressum | Kontakt