堆栈内存溢出
  繁体   English   中英

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

[英]jQuery theme switcher for multiple stylesheets

 原文  2011-09-01 10:45:07  9   4    jquery/ css/ switchers

问题描述

我想使用此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);

4 个解决方案

解决方案1
 0  2011-09-02 13:12:42

要应用两个样式表，请使用css scope选项下载主题。 这将以您提供的范围作为所有字段的开头。 例如，假设您要两个，可以说将.ex1添加到第一个，并将.ex2到第二个。 （实际上是在下载表单中的名称之前键入“。”）。

然后，当您要使用它们时，您可以执行此操作 

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

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

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

解决方案2
 0  2011-09-12 21:35:44

我完全知道您要实现的目标，因为我正在为工作中的项目开发完全相同的功能！ 我不知道这个事实，但我怀疑您使用的kevinluck脚本是alistapart脚本的一个分支，该脚本于2001年发布约5年。

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经验的人能够做出贡献...

最好，阿比盖尔

解决方案3
 0  2011-09-13 00:42:52

对于初次实现此功能的任何人，请务必查看Cookie上的Wikipedia条目：

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

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

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);
     };

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

解决方案4
 0  2011-09-28 00:34:16

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

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

与其设置样式表，不如简单地在body标签上设置一个类。 很好地解决了将多种样式应用于文档元素的问题。 不知道该脚本在之外的其他元素上使用的灵活性如何。 此外，由于它是Javascript，因此是客户端，并且不能/如果/然后使用逻辑来应用任何服务器端（即，没有针对生产环境或开发环境的自动样式表）。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery多个分组样式表切换器 我如何持久化由jquery中实现的主题切换器设置的主题？ 如何使用Jquery和JavaScript制作主题切换器？ 主题切换器不工作，没有 cookie JS 中的主题切换器 响应式视图主题切换器 JavaScript主题切换器问题 如何使用jQuery mobile的data-theme属性制作主题切换器 jquery隐藏/显示内容切换器内的多个FlexSliders。 mootools或jquery中的颜色切换器
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM