Question

我想使用这个styleswitcher脚本（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);

Answer 1

要应用两个样式表，请使用css范围选项下载主题。这是您提供的范围的所有字段的前言。例如，假设您想要两个，我们可以说将.ex1添加到第一个，.ex2添加到第二个。（实际上在下载表单中输入名称前的'。'。）

然后当你想使用它们时你可以这样做

<button id="btn1" class=".ex1">Button 1</button>
<button id="btn2" class=".ex2">Button 2</button>

$('#btn1').button();
$('#btn2').button();

这应该将带有'.ex1'的文件中的样式应用于第一个按钮，将带有'.ex2'的样式应用于带有'.ex2'的样式。

Answer 2

我确切地知道你想要实现的目标，因为我正在为一个项目工作完全相同的功能！我不知道这个事实，但我怀疑你正在使用的kevinluck脚本是alistapart脚本的一个分支，它在大约5年前发布，在2001年。

http://www.alistapart.com/articles/alternate/

我还没有找到最终的解决方案，因为我还在研究一些涉及数组和读/写cookie的项目。但这是一个部分解决方案，它将指定的样式表保存在默认样式表之上：

function setActiveStyleSheet(title) {
  var i, a, main, active, elements;
  elements = document.getElementsByTagName("link");

  // search through each stylesheet
  for(i=0; elements.length; i++) {
    a = elements[i];

    // check that the style sheet has a title and attribute is not empty 
    if((a.getAttribute("rel").indexOf("style") != -1) && a.getAttribute("title")) {

    if ((a.getAttribute("title") == title) && (a.disabled == false)){
        active = true;
    };

    // disable stylesheet
    a.disabled = true;

    // if the stylesheet is marked 'default', turned it on
    if (a.getAttribute("title") == "default"){
        a.disabled = false;
    }
    // if the stylesheet has the title we're trying to set, turned it on
    if (a.getAttribute("title") == title){
        a.disabled = false;             
    }
    // or if it was already on, in which case we turn it on
    if (active) {
        a.disabled = false;
    };
  }
 }
}

您可以将其称为1.5样式表解决方案，而不是2样式表解决方案。无论如何，最终的解决方案将涉及编写多个cookie，每个cookie包含一个样式表引用，或者编写包含多个样式表引用的各种复合cookie。

如果/当我研究并解决了这个问题，我会发布剩下的解决方案。在此之前，希望有更多cookie经验的人能够贡献......

最佳，亚比

Answer 3

对于第一次实现此功能的人，请务必查看有关cookie的维基百科条目：

http://en.wikipedia.org/wiki/HTTP_cookie

其中最重要的信息可能是如何快速轻松地访问加载的cookie。在浏览器的URL栏中键入以下内容：

javascript:alert(document.cookie)

此外，添加到上一个函数底部的以下代码段将为每个样式表创建一个唯一的Cookie：

 // if the stylesheet is active, write a cookie and persist it
     if (a.disabled == false) {
         var cookieName = 'stylesheet' + i;
         createCookie(cookieName, a.getAttribute("title"), 30);
     };

该过程的最后一部分是获取一个函数来读取每个样式表。希望在接下来的几天内完成这个......

Answer 4

嗯...找到了一个值得考虑的替代解决方案：

http://www.alistapart.com/articles/bodyswitchers/ http://www.alistapart.com/d/bodyswitchers/iotbs.js

它不是设置样式表，而只是在body标签上设置一个类;这很好地解决了将多个样式应用于文档元素的问题。不确定脚本在其他元素上的灵活性。此外，由于它是Javascript，它是客户端，并且如果/然后逻辑（即没有用于生产和开发环境的自动样式表），则不能应用任何服务器端。

用于多个样式表的jQuery主题切换器

4 个答案: