当前位置： 文江博客话题详情

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

发布于 2024-12-02 08:26:06 字数 7055 浏览 0 评论 0原文

我想使用这个样式切换器脚本（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);
原文

I would like to use this styleswitcher script (http://www.kelvinluck.com/assets/jquery/styleswitch/),but have it load 2 stylesheets at once. The objective is the user can select a font size and/or colour and/or screen width. Not sure if it's just a case of adding a function to handle more than one cookie?

Here's what I have so far: (http://www.digitalkulture.com/example/)

If anyone has an idea, I'd be grateful. Thank you.

<!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>

The styleswitcher.js file

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

怀念你的温柔 2024-12-09 08:26:06

要应用两个样式表，请使用 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”的文件中的样式应用到第一个按钮。

To apply two stylesheets, download the themes using the css scope option. This prefaces all fields with the scope you provide. For example, let's say you want two, we can say add .ex1 to the first and .ex2 to the second. (Actually type in the '.' before the name in the download form).

Then when you want to use them you can do this

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

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

This should apply the styles in the file with '.ex1' to the first button and the styles with the file with '.ex2'.

回复 原文
白芷 2024-12-09 08:26:06

我确切地知道您想要实现的目标，因为我正在为工作中的项目开发完全相同的功能！我确实不知道这一点，但我怀疑您使用的 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 经验的人能够做出贡献……

最好，
阿比盖尔

I know exactly what you're trying to achieve, since I'm working on the exact same functionality for a project at work! I don't know this for a fact, but I suspect that the kevinluck script that you're using is a fork of the alistapart script, which was published about 5 years prior, in 2001.

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

I haven't gotten the final solution working yet, as I'm still researching some items involving arrays and reading/writing to cookies. But here's a partial solution, which persists a specified stylesheet on top of a default stylesheet:

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

You might call it a 1.5 stylesheet solution, rather than a 2 stylesheet solution. Anyhow, the final solution is going to involve either writing multiple cookies that each contain a single stylesheet reference, or writing a compound cookie of sorts, that contains multiple stylesheet references.

If/when I get this researched and resolved, I'll post the rest of the solution. Until then, hoping somebody with more experience with cookies will be able to contribute...

Best,
Abigail

回复 原文
想念有你 2024-12-09 08:26:06

对于第一次实现此功能的任何人，请务必查看有关 cookie 的 wikipedia 条目：

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

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

For anybody who's implementing this functionality for the first time, be sure to check out the wikipedia entry on cookies:

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

Possibly the most important information therein is how to quickly and easily access the loaded cookies. Type the following in the URL bar of your browser:

javascript:alert(document.cookie)

Also, the following snippet added to the bottom of the previous function will create a unique cookie for each stylesheet:

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

The last part of the process is to get a function to read in each of the stylesheets. Hopefully will finish that sometime in the next couple of days...

回复 原文
無心 2024-12-09 08:26:06

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

http://www.alistapart.com/articles /身体切换器/
http://www.alistapart.com/d/bodyswitchers/iotbs.js

它不是设置样式表，而是简单地在 body 标签上设置一个类；这很好地解决了将多种样式应用于文档元素的问题。不确定该脚本在 .x 以外的元素上使用时有多灵活。另外，由于它是 Javascript，所以它是客户端，并且不能应用任何服务器端 if/then 逻辑（即，没有用于生产环境和开发环境的自动样式表）。

Hmmm... found a possible alternative solution that's worth considering:

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

Rather than setting stylesheets, it simply sets a class on the body tag; which nicely solves the problem of applying multiple styles to document elements. Not sure how flexible the script is for use on elements other than . Also, since it's Javascript, it's client side, and one can't apply any server side if/then logic (i.e. no automated stylesheets for production vs development environments).

回复 原文
~没有更多了~

关于作者

︶葆Ⅱㄣ

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

初遇

文章 0 评论 0

听闻余生

文章 0 评论 0

Z_dy

文章 0 评论 0

左岸枫

文章 0 评论 0

1848719402

文章 0 评论 0

婷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文