Переключатель тем jQuery для нескольких таблиц стилей - PullRequest
0 голосов
/ 01 сентября 2011

Я хотел бы использовать этот скрипт стилей переключателя (http://www.kelvinluck.com/assets/jquery/styleswitch/),but позволяет загружать сразу 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 ]

0 голосов
/ 28 сентября 2011

Хммм ... нашел возможное альтернативное решение, которое стоит рассмотреть:

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

Вместо установки таблиц стилей, он просто устанавливает класс в теге body;что хорошо решает проблему применения нескольких стилей к элементам документа.Не уверен, насколько гибок скрипт для использования с другими элементами, кроме.Кроме того, так как это Javascript, это сторона клиента, и никто не может применить какую-либо серверную сторону, если / тогда логика (то есть, нет автоматических таблиц стилей для рабочих сред и сред разработки).

0 голосов
/ 13 сентября 2011

Я точно знаю, чего вы пытаетесь достичь, так как я работаю над точно такой же функциональностью для проекта на работе!Я не знаю этого наверняка, но я подозреваю, что используемый вами сценарий kevinluck является ответвлением от сценария alistapart, который был опубликован около 5 лет назад, в 2001 году.http://www.alistapart.com/articles/alternate/

Я еще не получил окончательное решение, так как я все еще исследую некоторые элементы, включающие массивы и чтение / запись в куки.Но вот частичное решение, которое сохраняет указанную таблицу стилей поверх таблицы стилей по умолчанию:

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 сможет внести свой вклад ...

Best, Abigail

0 голосов
/ 13 сентября 2011

Для тех, кто впервые реализует эту функцию, обязательно ознакомьтесь со статьей в википедии о файлах cookie:

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

Последняя часть процесса - получить функцию для чтения в каждой из таблиц стилей. Надеюсь, закончим это когда-нибудь в ближайшие пару дней ...

0 голосов
/ 02 сентября 2011

Чтобы применить две таблицы стилей, загрузите темы, используя опцию 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».

...