Темы сайта используя 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"); }

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

Пример