Переключатель тем JQuery для нескольких таблиц стилей
Я хотел бы использовать этот скрипт 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 ответа
Для тех, кто впервые реализует эту функцию, обязательно ознакомьтесь со статьей в википедии о файлах 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);
};
Последняя часть процесса - получить функцию для чтения в каждой из таблиц стилей. Надеюсь, закончим это когда-нибудь в ближайшие пару дней...
Чтобы применить две таблицы стилей, загрузите темы, используя опцию 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".
Я точно знаю, чего вы пытаетесь достичь, поскольку я работаю над тем же функционалом для проекта на работе! Я не знаю этого наверняка, но я подозреваю, что используемый вами скрипт 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, который содержит несколько ссылок на таблицу стилей.
Если / когда я получу это исследование и решу, я опубликую остальную часть решения. До тех пор, надеясь, что кто-то с большим опытом работы с куки сможет внести свой вклад...
Бест, Эбигейл
Хммм... нашел возможное альтернативное решение, которое стоит рассмотреть:
http://www.alistapart.com/articles/bodyswitchers/ http://www.alistapart.com/d/bodyswitchers/iotbs.js
Вместо того, чтобы устанавливать таблицы стилей, он просто устанавливает класс в теге body; что хорошо решает проблему применения нескольких стилей к элементам документа. Не уверен, насколько гибок скрипт для использования с другими элементами, кроме. Кроме того, так как это Javascript, это сторона клиента, и никто не может применить какую-либо сторону сервера, если / тогда логика (то есть нет автоматических таблиц стилей для рабочих сред и сред разработки).