JQuery таблицы стилей переключатель - как повлиять только на тему CSS? - PullRequest
Новая
       25

JQuery таблицы стилей переключатель - как повлиять только на тему CSS?

1 голос
/ 11 января 2011

Я использую код, найденный для переключателя таблиц стилей jquery.

Отсюда: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Теперь у меня проблема с использованием этого переключателя.

Я пытаюсь нам загрузить файл темы с сохранением загруженного основного файла CSS.

Мой основной CSS-файл содержит структуру моих сайтов, и я хотел бы сохранить этот файл загруженным, несмотря ни на что.

Теперь я пытаюсь использовать этот переключатель для загрузки альтернативных цветовых тем для сайта. Единственная проблема заключается в том, что мой основной файл CSS выгружается и заменяется цветными темами.

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

спасибо

Ответы [ 3 ]

2 голосов
/ 11 января 2011

Первый скрипт в этой статье заменяет таблицу стилей в всех <link> элементах. Вы захотите указать, какой <link> изменить (как во втором примере в этой статье, который использует класс для дифференциации).

Например: 

<link rel="stylesheet" type="text/css" href="main.css" />
<link class="theme" rel="stylesheet" type="text/css" href="theme1.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
if($.cookie("css")) {
    $("link.theme").attr("href",$.cookie("css"));
}
$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link.theme").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});
</script>
0 голосов
/ 11 января 2011

Таблицы стилей поставляются со стандартным способом сделать это. Так что вы не хотите добавлять / удалять стилевые узлы из dom или возиться с href. Этот способ по умолчанию - rel = "alternate stylesheet". Все с «альтернативой» загружается клиентом и не применяется. Все браузеры поддерживают это, и это было там давно.

Вы можете добавить класс или другой атрибут html (я использовал group = "foo", group = "bar") для обозначения логической группировки, к которой может применяться только одна таблица стилей. Чтобы отключить таблицу стилей, нужно изменить атрибут disabled узла таблицы стилей на «true». И способ его включения отключен = False. Не изменяйте «alternate» в атрибуте rel.

0 голосов
/ 11 января 2011

Вам нужно изменить Javascript-файл / код переключателя таблиц стилей и бит разметки

включить эти строки в часть вашего HTML-файла 

<link rel="stylesheet" type="text/css" href="main-stylesheet.css"/>
<link rel="stylesheet" type="text/css" id="alt_style" href=""/>

Заменить main-stylesheet.css вашей основной таблицей стилей.Другой пустой тег ссылки будет использоваться для альтернативной таблицы стилей.Вместо этого используйте эту функцию Javascript: 

$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link#alt_style").attr("href",$(this).attr('rel'));
        return false;
    });
});

Это должно сработать.:)

...