このスタイルスイッチャー スクリプト (http://www.kelvinluck.com/assets/jquery/styleswitch/) を使用したいのですが、一度に 2 つのスタイルシートをロードします。目的は、ユーザーがフォント サイズおよび/または色および/または画面幅を選択できるようにすることです。複数の Cookie を処理する関数を追加するだけの場合かどうかわかりませんか?
これが私がこれまでに持っているものです: (http://www.digitalkulture.com/example/)
誰かがアイデアを持っているなら、私は感謝します。ありがとうございました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="styles/defaultTheme.css" />
<link rel="alternate stylesheet" type="text/css" href="styles/silverTheme.css" title="silverTheme" />
<link rel="alternate stylesheet" type="text/css" href="styles/purpleTheme.css" title="purpleTheme" />
<link rel="alternate stylesheet" type="text/css" href="styles/highvisTheme.css" title="highvisTheme" />
<link rel="alternate stylesheet" type="text/css" href="styles/wideScreen.css" title="wideScreen" />
<link rel="alternate stylesheet" type="text/css" href="styles/fullScreen.css" title="fullScreen" />
<link rel="alternate stylesheet" type="text/css" href="styles/bigText.css" title="bigText" />
<!-- Scripts -->
<script type="text/javascript" src="js/jquery-1.6.1.js" /></script>
<script type="text/javascript" src="js/styleswitcher.js" /></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
var $sw_link = jQuery("a[title='themes_switch']");
jQuery(".dashTemplate a[title*=Theme]").click(function(){
jQuery(".dashTemplate a[title*=Theme]").removeClass("current");
jQuery(this).addClass("current");
});
jQuery(".dashTemplate a[title*=Screen]").click(function(){
jQuery(".dashTemplate a[title*=Screen]").removeClass("current");
jQuery(this).addClass("current");
});
jQuery(".dashTemplate a[title*=Text]").click(function(){
jQuery(".dashTemplate a[title*=Text]").removeClass("current");
jQuery(this).addClass("current");
});
jQuery(".dashTemplate a[title='defaultTheme']").addClass("defaultTheme").click(function(){
setActiveStyleSheet('defaultTheme');
return false;
});
jQuery(".dashTemplate a[title='silverTheme']").addClass("silverTheme").click(function(){
setActiveStyleSheet('silverTheme');
return false;
});
jQuery(".dashTemplate a[title='purpleTheme']").addClass("purpleTheme").click(function(){
setActiveStyleSheet('purpleTheme');
return false;
});
jQuery(".dashTemplate a[title='highvisTheme']").addClass("highvisTheme").click(function(){
setActiveStyleSheet('highvisTheme');
return false;
});
jQuery(".dashTemplate a[title='wideScreen']").addClass("wideScreen").click(function(){
setActiveStyleSheet('wideScreen');
return false;
});
jQuery(".dashTemplate a[title='fullScreen']").addClass("fullScreen").click(function(){
setActiveStyleSheet('fullScreen');
return false;
});
jQuery(".dashTemplate a[title='bigText']").addClass("bigText").click(function(){
setActiveStyleSheet('bigText');
return false;
});
});
</script>
</head>
<body>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus, purus non ultrices convallis, leo massa porta erat, et gravida magna quam at ante. Vivamus vitae sem lectus. Aliquam augue tortor, tincidunt vitae tempus ac, porta eu sem. Mauris laoreet erat vitae metus venenatis ac lacinia lorem ultricies.
</div>
<!--HTML selectors-->
<ul class="dashTemplate">
<li><a class="defaultTheme" title="defaultTheme" href="#">reset color</a> |
<li><a class="silverTheme" title="silverTheme" href="#">silver color</a> |
<li><a class="purpleTheme" title="purpleTheme" href="#">purple color</a> |
<li><a class="highvisTheme" title="highvisTheme" href="#">yellow color</a></li>
</ul>
<ul class="dashTemplate">
<li><a class="wideScreen" title="wideScreen" href="#">wide screen</a> |
<li><a class="fullScreen" title="fullScreen" href="#">full screen</a> |
<li><a class="defaultTheme" title="defaultTheme" href="#">reset</a></li>
</ul>
<ul class="dashTemplate">
<li><a class="bigText" title="bigText" href="#">big text</a> |
<li><a class="defaultTheme" title="defaultTheme" href="#">reset</a></li>
</ul>
</body>
</html>
styleswitcher.js ファイル
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);