堆棧內存溢出
  簡體   English   中英

多個樣式表的jQuery主題切換器

[英]jQuery theme switcher for multiple stylesheets

 原文  2011-09-01 10:45:07  5   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