Переключение стилей 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 (у меня линь :) …)