Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
18-11-2009, 13:00
Темы сайта используя 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("<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");
}


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




Пример


Теги: CSS будет переключатель темы. class="switch" будем

Просмотров: 700
Комментариев: 0:   18-11-2009, 13:00
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle