Teste Style-Umschaltung:
a) Verwende
Cookies
:
css2-Style,
css1-Style,
Style-reset-Style
b) Verwende
localStorage
:
css2-Style,
css1-Style,
Style-reset-Style
Um die psychologische Wirkung von Style-Vorlagen "live zu erleben" möchten Designer die entwickelten Style-Vorlagen ( bei gleichem Content ) gerne schnell umschalten können. Wie erscheinen dann die entwickelten Style-Vorlagen im Vergleich zueinander? Wie kann das Style-Umschalten gemacht werden? Wie kann aus mehreren Design-Vorlagen eine ausgewählt und foran gültig gesetzt werden? Wie kann nach einem erneuten Aufruf der Seite die gewählte Design-Vorlage weiterhin aktiv bleiben?
Hier ein einführendes Beispiel. Im HTML-Header stehen link-Tags, die unterschiedliche Styles includieren. document.getElementsByTagName("link") liefert einen Array, der alle link-Elemente der HTML-Seite enthält. Ist link_tag ein solches link-Elemente, so erfolgt der value-Zugriff auf das title-Attribut von link_tag mit Hilfe von link_tag.getAttribute('title').
Bitte testen, indem ein Style ausgewählt wird:
a)
Style-Reset ( außer spezielle Styles für dt-Tags ),
b)
css1-Style für PC,
c )
css2-Style für Smartphon
Die Funktion set_style_title('css1') durchläuft alle link-Elemente der HTML-Seite und setzt lediglich 'css1' aktiv.
<a href="javascript:void(0)"
onclick="set_style_title('css1');return false;">
css1-Style
</a>
<link type="text/css" rel="alternate stylesheet" href="css3.css" title="css3" />
<link type="text/css" rel="alternate stylesheet" href="css2.css" title="css2" />
<link type="text/css" rel="stylesheet" href="css1.css" title="css1" />
<script>
function set_style_title(link_title) {
var i, link_tag, tags_name = 'link';
for (i = 0; (link_tag = document.getElementsByTagName(tags_name)[i]); i += 1)
{
if (link_title === link_tag.getAttribute('title')) {
link_tag.disabled = false;
} else {
link_tag.disabled = true;
}
}
}
</script>
Ein Cookie entspricht einer max. ca. 4 kB key-value-Liste, die der Browser einer Seite zuordnet. Ein Cookie kann vom Webserver an den Browser gesendet werden oder in der Website von JavaScript erzeugt werden. Zu einem Cookie gehört ein Verfallszeit. Das Cookie-Konzept geht auf Netscape ( RFC 2109 ) zurück und kann den Mangel des zustandslosen HTTP-Protokolls mindern (siehe z.B. de.wikipedia: HTTP-Cookie )
Der ECMAScript-Quelltext ist wohl selbsterklärend und befindet sich in im HTML-Header dieser Seite. Ganz oben auf dieser Seite sind die Test für die Umschaltung. Zum testen der Style-Umschaltung mit mit Cookies kann auch hier geklickt werden:
a) Wähle mit Hilfe eines Seiten-Cookie: css2-Style
b) Wähle mit Hilfe eines Seiten-Cookie: css1-Style
Die clientseitige Style-Umschaltung soll nun mit Hilfe von localStorage ( W3C ) erfolgen.
Teste:
a) Wähle css2-Style mit Hilfe von localStorage: css2-Style
b) Wähle css1-Style mit Hilfe von localStorage: css1-Style
c) Wähle Reset-Style mit Hilfe von localStorage: Style-reset-Style
Daten im localStorage ( lokal, PC max etwa 5 MB ) bleiben auch "offline" und nach dem Ausschalten des Browsers erhalten. In die HTML-Seite ( Header ) werden zum Umschalten die gewünschten CSS-Dateien includiert, etwa
<link type="text/css" rel="alternate stylesheet" href="info-reset.css" title="reset" /> <link type="text/css" rel="alternate stylesheet" href="info-alternate.css" title="css2" /> <link type="text/css" rel="stylesheet" href="info.css" title="css1" />
Die folgende Funktion style_umschaltung() merkt sich im localStorage den aktuell ausgewählten Style, der als Aufruf-Argument style_title übergeben wird. Bei window.onload wird style_umschaltung() ( ohne Aufruf-Argument ) verwendet.
function style_umschaltung(style_title) { // braucht localStorage
var i, el, els;
if (typeof (window['localStorage']) !== 'object') { alert("ERR: kein localStorage"); return;}
if (style_title) { localStorage.setItem("akt_style_title", style_title);
} else { style_title = localStorage.getItem("akt_style_title");
} style_title = style_title || "css2";
els = document.getElementsByTagName("link");
for (i = 0; i < els.length; i += 1) { el = els[i];
if (el.getAttribute("rel").indexOf("style") != -1 && el.getAttribute("title")) {
if (el.getAttribute("title") == style_title) {
els[i].disabled = false;
} else { els[i].disabled = true; }
}
}
}
Es gibt zahlreiche Möglichkeiten (Clinet/server-basiert), wie Style-Umschaltung gemacht werden können. Besonder einfach ist eine rein Cleintseitige Umschaltung bei Verwendung von Frame's oder iFrame's. So kann z.B. der "parent" die Styles einmal includieren und die Styleumschaltung von allen aktuellen/neuen Frame-Seiten genutzt werden.