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:
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.