Переключение стилей css с помощью jquery
На одном из проектов (да на том самом osinform.ru) возникли споры по выбору стиля внешнего вида (ну темный или светлый) … помучившись немного (дней так 10) с шаблоном я все же решился сделать 2 шаблона, но потом как представил … очередные шаблоны, лишняя нагрузка и так далее … ну и в итоге решил сделать просто 2 css стиля …
Нашел я один java скрипт у себя на компе, но он у меня так и не завелся (ну из за подключенной jquery). Ну в итоге проведя ритуал в google нашел неплохое решение …
Кстати при выборе картинки для этой статьи я нашел некую картинку с текстом «Переключение между файлами стилей CSS для DataLife Engine». Не понимаю, почему только для DLE ?! … В общем затер эти надписи, так что автор данной картинки — не обижайся …
Ладно перейдем к делу … Нам нужно сделать ссылки которые будут переключать стили и смогут работать с Cookies!
Для начала заготовим несколько стилей для нашего сайта. Пусть их будет 3 …
Для элементов присвоим id=»init», ну и сам стиль «по умолчанию» подключаем на прямую в head:
<link type="text/css" rel="stylesheet" media="screen" title="style-default" href="style-default.css" />
Главное не потерять атрибут title в элементе , иначе ничего не заработает.
Теперь подключим другие стили с помощью функций jquery:
<!-- Переключение css - подключаем стили -->
<script type="text/javascript">
$(document).ready(function() {
var inject = $('#init');
var skinsPath = '/tenplates/lite/css/'; //путь к директории со стилями
inject.append(
'<link type="text/css" rel="stylesheet" media="screen" title="style-1" href="'+ skinsPath+'style-1.css" />' +
'<link type="text/css" rel="stylesheet" media="screen" title="style-2" href="'+ skinsPath+'style-2.css" />' +
'<link type="text/css" rel="stylesheet" media="screen" title="style-3" href="'+ skinsPath+'style-3.css" />' +
);
});
</script>
Теперь добавим функцию jQuery переключения CSS стилей:
/* Switch Styles*/
$(function($) {
$(document).ready(function() {
$('.styleswitch').click(function() {
$("#header").fadeOut(700);
switchStylestyle(this.getAttribute("rel"));
$("#header").fadeIn(900);
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName) {
$('link[rel*=style][title]').each(function(i) {
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
/* cookie style core */
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 var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i &lt; 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;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
Автор данного способа добавил анимацию fadeIn и fadeOut для региона header в моём шаблоне. Это сглаживает прогрузку фонового изображения и делает переключение более плавным. Можете вписать туда body, если изменяющихся участков много.
Теперь добавим сами переключатели:
<!--noindex--> <a href="#" rel="style-default" class="styleswitch s2">Белая версия</a> | <a href="#" rel="style-1" class="styleswitch s1">Темная версия</a> | <a href="#" rel="style-2" class="styleswitch s3">Красная версия</a> | <a href="#" rel="style-3" class="styleswitch s4">Зеленая версия</a> <!--/noindex-->
Класс styleswitch используется для установки события click, атрибут rel должен содержать имя стиля синхронизируемое с title в . Ссылки можно обвернуть списком или вовсе сделать кнопками и запилить для них CSS по вкусу. Я также завернул их в noindex, чтобы не индексировать несемантичную функциональность.
Проверенно на всем что есть кроме IE (у меня линь :) …)