Přepínání stylů stránky
Použití více alternativních stylů nám umožňuje již samotný jazyk HTML. Můžeme například vložit do hlavičky následující tři styly.
<link href="red.css" type="text/css" rel="stylesheet" title="Red" /> <link href="green.css" type="text/css" rel="alternate stylesheet" title="Green" /> <link href="blue.css" type="text/css" rel="alternate stylesheet" title="Blue" />
Důležité jsou atributy rel a title. Pouze jeden, preferovaný styl má nastaveno rel="stylesheet", alternativní styly mají atribut
rel="alternate stylesheet". Povinný je také atribut title, který obsahuje název stylu tak, jak se má zobrazit uživateli.
Mezi styly s různým title lze pak vybírat, styly bez atributu title se načtou vždy všechny.
Takto upravené odkazy na styly již stačí k tomu, aby si uživatel mohl ve Firefoxu zvolit styl stránky. Styly nalezneme v menu Zobrazit → Styl stránky.
Bohužel si Firefox styl vybraný v menu nepamatuje, při další návštěvě se stránka opět zobrazí ve stylu preferovaném.
Takové řešení nám určitě stačit nebude. Výběr stylu musíme umístit přímo do stránky, jinak se o této možnosti uživatel těžko dozví a navíc chceme, aby se zvolený styl používal i nadále v průběhu návštěvy. K tomu použijeme JavaScriptovou knihovnu jQuery.
Hlavičku upravíme tak, aby alternativní styly byly zakázany explicitně, označení jako „alternate stylesheet“ totiž dělá problémy jiným prohlížečům (např. Google Chrome, IE8).
<link href="red.css" type="text/css" rel="stylesheet" title="Red" /> <link href="green.css" type="text/css" rel="stylesheet" title="Green" disabled /> <link href="blue.css" type="text/css" rel="stylesheet" title="Blue" disabled />
Ve Firefoxu přepínaní z menu nadále funguje, přestože jsme se poněkud vzdálili od specifikace.
Přidáme přepínadlo stylů přímo do stránky.
<ul>
<li><a href="javascript:setStyle('Red')">Red</a></li>
<li><a href="javascript:setStyle('Green')">Green</a></li>
<li><a href="javascript:setStyle('Blue')">Blue</a></li>
</ul>
Funkce setStyle bude vypadat následně.
function setStyle(name)
{
$('link[rel$=stylesheet][title]:not([title='+name+'])').attr('disabled', 'disabled');
$('link[rel$=stylesheet][title='+name+']').removeAttr('disabled');
}
Nyní už chybí jen paměť na zvolený styl – budeme si ukládat cookie. Použijeme plugin jQuery cookie.
Funkci setStyle rozšíříme o uložení zvoleného stylu do cookie. Parametr name bude nejdříve prázdný, v tomto případě se použije defaultní styl a cookie se nevytvoří – to pro případ, že uživatel styl měnit nebude. Nechceme přidávat cookie zbytečně.
if (name)
$.cookie("style", name, { path: '/', expires: 300 });
else
name = 'Red';
Už chybí jen nastavení zvoleného stylu při načtení stránky. Přidáme následující řádek do události $(document).ready.
setStyle($.cookie("style"));
Tím se zajistí nastavení stylu podle cookie. Pokud cookie ještě neexistuje, nic se neděje, funkci se předá prázdný objekt a ta nastaví defaultní styl.
Kompletní kód najdete v ukázce.
Díky za pěkný návod :-)