|
В этой статье мы рассмотрим как можно переключать таблицы стилей, используя 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("<div align="center">[thumb]http://www.css-tricks.ru/1rightarrow.png[/thumb]</div>
");
Затем необходимо обработать событие 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");
}
Сейчас никакого стиля по умолчанию нет, это очень простая задача и я думаю вы справитесь сами.
Пример
Перейти обратно к новости
|