Переключение между стилевыми таблицами с помощью jQuery

Здесь мы собираем сниппеты - кусочки jQuery-кода, позволяющие решить какую-либо небольшую задачу. Топикстартер обязан предоставить свой сниппет, чтобы открыть тему!

Модераторы: zandroid, EGORR

Правила форума
Чтобы открыть тему, необходимо представить свой jQuery-код и html-разметку (при необходимости), а также подробно все прокомментировать! В открытой теме все могут оставлять комментарии, задавать вопросы.

Переключение между стилевыми таблицами с помощью jQuery

Сообщение Gennady » 28 авг 2010, 21:44

Организовать переключение разных стилей на странице можно с помощью очень нехитрого кода:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Переключение между стилевыми таблицами</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<link type="text/css" href="default.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
  $("a.switcher").click(function() {
    $("link[rel=stylesheet]").attr("href", $(this).attr("rel"));
  });
});
</script>
</head>
<body>
<h1>Переключение между стилевыми таблицами</h1>
<a href="#" class="switcher" rel="default.css">Тема по умолчанию</a> | <a href="#" class="switcher" rel="red.css">Красная тема</a> | <a href="#" class="switcher" rel="blue.css">Синяя тема</a>
<div id="colorSquare"></div>
</body>
</html>

Используем для переключения между различными стилевыми файлами обычные ссылки, присвоив им всем одно имя класса .switcher, а в атрибуте rel укажем имя css-файла, где хранятся соответствующие таблицы стилей.
При клике на какой-либо ссылке у которой атрибут класс имеет значение switcher, находим элемент link, с атрибутом rel="stylesheet" и присваиваем его атрибуту href значение, полученное из атрибута rel той ссылки, по которой был совершен клик.
P.S. В общем в архиве есть готовый пример. :D
Вложения
switch-style-sheets.rar
(20.76 KIB) Скачиваний: 212
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Вернуться в jQuery сниппеты

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3