19-12-2009, 07:43
Hmm. Sprawdziłem i mi działa. Po kolei:
1. Robię plik skin.js i wklejam do niego to:
2. Robię sobie plik index.html, który wygląda tak:
3. Robię dwa pliki css. U mnie nazwane: ciepla.css i style.css
Żeby je rozróżnić przy próbie w jednym z nich wpisuje:
ciepla.css
a w drugim:
style.css
4. Robię drugi plik.html, nazywam go sobie index2.html, a jego zawartosc to:
I śmiga. Robiłem tak jak w tym tutorialu. Sprawdź u siebie czy to co wklejasz do sekcji head w drugim pliku ma poprawne ścieżki do styli. A jak nie zadziała to zrób po kolei to co Ci napisałem i pewnie wyłapiesz swój błąd.
Powodzenia.
1. Robię plik skin.js i wklejam do niego to:
Kod:
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function Skin(name, expires, path, message)
{
this.expires = typeof expires != 'undefined' ? expires : 365;
this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie';
this.name = typeof name != 'undefined' ? name : 'skin';
this.path = typeof path != 'undefined' ? path : '/';
var link = null;
var original = '';
var css = '';
this.get = function()
{
if (css != '') return css;
var matches = document.cookie.match(new RegExp('(^|;\\s*)' + this.name + '=([^;]*)'));
if (matches && matches.length == 3) css = matches[2];
return css;
}
this.set = function(url)
{
document.cookie = this.name + '=' + url + (this.expires > 0 ? ';expires=' + new Date(new Date().getTime() + 86400000 * this.expires).toGMTString() : '') + ';path=' + this.path;
css = url;
if (this.message != '' && !navigator.cookieEnabled) window.alert(this.message);
this.show();
}
this.reset = function()
{
css = '';
document.cookie = this.name + '=;path=' + this.path;
this.show();
}
this.show = function()
{
var url = this.get();
if (url != '' || original != '')
{
if (link == null || original == '')
{
for (var i = 0; i < document.getElementsByTagName('link').length; i++)
{
if (document.getElementsByTagName('link')[i].getAttribute('rel').toLowerCase() == 'stylesheet')
{
link = document.getElementsByTagName('link')[i];
original = link.getAttribute('href');
break;
}
}
}
link.setAttribute('href', url != '' ? url : original);
}
}
this.show();
}
var skin = new Skin();2. Robię sobie plik index.html, który wygląda tak:
Kod:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ciepla.css" />
<script type="text/javascript" charset="utf-8" src="skin.js"></script>
</head>
<body>
<a href="index2.html">index2</a><br />
<!-- Pierwsza opcja czyli zmiana poprzez linki -->
<a href="javascript:void(0)" onclick="skin.set('style.css'); return false">Skórka 1</a>< br />
<a href="javascript:void(0)" onclick="skin.set('ciepla.css'); return false">Skórka 2</a><br /><br />
<!-- Druga opcja czyli zmiana poprzez listę -->
<select id="skin" onchange="if (this.value == '') skin.reset(); else skin.set(this.value)">
<option value="style.css">Skórka 1</option>
<option value="ciepla.css">Skórka 2</option>
</select>
<script type="text/javascript">
// <![CDATA[
document.getElementById('skin').value = skin.get();
// ]]>
</script>
</body>
</html>3. Robię dwa pliki css. U mnie nazwane: ciepla.css i style.css
Żeby je rozróżnić przy próbie w jednym z nich wpisuje:
ciepla.css
Kod:
body {
background:#ff0000;
}style.css
Kod:
body {
background:#ffffff;
}4. Robię drugi plik.html, nazywam go sobie index2.html, a jego zawartosc to:
Kod:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ciepla.css" />
<script type="text/javascript" charset="utf-8" src="skin.js"></script>
</head>
<body>
<a href="index.html">Link zwrotny</a><br />
<p>zawartość strony</p>
</body>
</html>I śmiga. Robiłem tak jak w tym tutorialu. Sprawdź u siebie czy to co wklejasz do sekcji head w drugim pliku ma poprawne ścieżki do styli. A jak nie zadziała to zrób po kolei to co Ci napisałem i pewnie wyłapiesz swój błąd.
Powodzenia.
