Темы сайта используя CSS и jQuery

В этой статье мы рассмотрим как можно переключать таблицы стилей, используя jQuery. Для примера, создадим плагин выбора темы. Добавим возможность циклического переключения темы, то есть будет дополнительно 2 кнопки ("вперёд" и "назад"), для удобства смены доступных файлов стилей. Кроме того, будем сохранять в куках предпочтения конечного пользователя, для его будущих просмотров сайта.

Наш переключатель будет просматривать все элементы link, которым указан класс switch и в которых есть тэг link. В каждом таком элементе дополнительно пропишем тэг style со значением цвета, определяющего тему. При выборе темы мы будем выключать все стили, а затем активировать выбранный. Ну и, как я уже упоминал, будут добавлены дополнительные стрелки для удобства переключения.

HTML

Для начала напишем html-файл, который должен состоять из 3 основных частей:

• Стилевые файлы с определяющим цветом.
• Элемент div, в котором будет расположен переключатель тем.
• Оставшаяся часть документа, к которой будем применять стили.

Список стилевых файлов, как вы уже наверняка догадались, должен выглядеть так:

<link rel="stylesheet" class="switch" style="color:#23B2D2;" type="text/css" href="styles_blue.css" />
<link rel="stylesheet" class="switch" style="color:#8BE487;" type="text/css" href="styles_green.css" />
<link rel="stylesheet" class="switch" style="color:#F24633;" type="text/css" href="styles_red.css" />

Обратите внимание, что всем им присвоен класс .switch и установлен аттрибут style с указанием цвета. Код на jQuery, после загрузки страницы, будет брать цвет из стиля каждой ссылки, для того чтобы нарисовать переключатель тем.

jQuery

Для начала соберём все доступные темы. Для этого в цикле возьмём значение свойства color каждого элемента link.

var colors = new Array;
// Выключаем все ссылки со стилем .switch и строим массив цветов.
$(".switch[rel='stylesheet']").each(function() {
    $(this).attr("disabled", "true");
    colors.push($(this).css("color"));
});

Затем мы просматриваем все цвета для того чтобы сформировать и добавить на страницу переключатель тем.

$(colors).each(function(index, el) {
     $("#sheetswitch").append("<a class='swatch' style=''></a>");
});
$("#sheetswitch").append("<a class='sheetswitch_next' href='#'><img src='1rightarrow.png' /></a>");

Затем необходимо обработать событие click для каждого переключателя. Поскольку они создавались в том же порядке как и идут ссылки на файлы стилей, мы можем обращаться к ним по индексу. Сначала мы выключаем все стили, затем включаем стиль с выбранным индексом, затем сохраняем выделенное значение в cookies.

$(".swatch").click(function() {
   $(".swatch").removeClass("swatch_hi");
   $(this).addClass("swatch_hi");
   var index = $(".swatch").index(this);
   $(".switch[rel='stylesheet']").attr("disabled", "true");
   $(".switch[rel='stylesheet']").eq(index).attr("disabled", "");
   $.cookie('mysite_sheetswitch_idx', index, {expires: 7});
});

Далее рассмотрим элементы циклического переключения тем. Они должны находить индекс текущей темы и изменять его значение на 1. Для перехода на начало или конец списка, воспользуемся функцией size()

var selected = $(".switch[rel='stylesheet']").filter(function () {
	return $(this).attr("disabled") == false; 
});
var current_idx = $(".switch[rel='stylesheet']").index($(selected));
var length = $(".switch[rel='stylesheet']").size();

if (current_idx >= 0) {
	var next = current_idx + 1;
	if (next > (length - 1)) next = 0;
	$(".switch[rel='stylesheet']").attr("disabled", "true");
	$(".switch[rel='stylesheet']").eq(next).attr("disabled", "");
	$(".swatch").removeClass("swatch_hi");
	$(".swatch").eq(next).addClass("swatch_hi");
	$.cookie('mysite_sheetswitch_idx', next, {expires: 7});
}

Последний шаг - это проверка перед загрузкой темы. Проверим, установлены ли cookies для выбранной темы, и если это так, то устанавливает стиль без загрузки.

if ($.cookie('mysite_sheetswitch_idx')) {
	var idx = $.cookie('mysite_sheetswitch_idx');
	$(".switch[rel='stylesheet']").eq(idx).attr("disabled", "");
	$(".swatch").eq(idx).addClass("swatch_hi");
}

Сейчас никакого стиля по умолчанию нет, это очень простая задача и я думаю вы справитесь сами.

Пример