1

Здравствуйте! Подскажите пожалуйста, как сделать смену таблиц стилей(!) на сайте, (чтобы пользователь сам мог выбирать фон изображения, цвет, размер) настройки должны сохраняться. Реализовывала это на пхп, при авторизации пользователь вытягивал из базы свое значение и ему подгружалась своя таблица стилей. Как это можно реализовать на js - подскажите библиотеки, лучше с примерами. Спасибо!

3
  • 1
    зачем это хранить у себя в бд? лучше в куках
    – Gorets
    20 сен 2012 в 8:43
  • @Gorets - лучше в localStorage, либо во все той-же БД, то, что куки влияют на объем трафика и передаются при любом http запросе, ниче?
    – user3545
    20 сен 2012 в 10:37
  • 1
    я храню в базе, потому что пользователь может зайти с любого компа с любого браузера и ему нужны его настройки!
    – kira
    20 сен 2012 в 12:19

3 ответа 3

2

С библиотеками конечно проще, зависит от того, что у вас используется. Можно и без библиотек, можно jquery и любые другие варианты... Важно добиться результата, средства роли не играют. Нужно добавить в заголовок страницы еще один стиль. Т.е. сначала у вас:

<html>
<head>
...
<link rel="stylesheet" type="text/css" href="/lighttheme.css" />
...

потом вы добавляете еще один элемент, становится:

<html>
<head>
...
<link rel="stylesheet" type="text/css" href="/lighttheme.css" />
<link rel="stylesheet" type="text/css" href="/darktheme.css" />
...

При этом стили, которые описаны во добавленном файле перекроют стили, которые были указаны ранее.

В живую эффект можно посмотреть здесь JQuery UI Themeroller->Gallery. С помощью jquery это делается так:

//function to append a new theme stylesheet with the new style changes
function updateCSS(locStr){
  //once 1.6 final is ready: 
  $("head").append('<link href="/themeroller/css/parseTheme.css.php?'+ locStr +'" type="text/css" rel="Stylesheet" />');
  $("link[href*=parseTheme\\.css\\.php]:last").after('<link href="/themeroller/css/parseTheme.css.php?'+ encodeURIComponent( locStr ) +'" type="text/css" rel="Stylesheet" />');
  if($("link[href*=parseTheme\\.css\\.php]").size() > 3){
    $("link[href*=parseTheme\\.css\\.php]:first").remove();
  }
};

Т.е. добавляем еще один стиль в <head>, а если там уже много их, то можно первый удалить.

Таким образом. С сервера приходит страница с одной темой, оттуда же приходит список возможных тем. При выборе пользователя меняется файл стилей. Хранить можно в куках, можно на сервере (чтоб при первом же вызове правильный стиль подставлять, а не менять скриптом).

1
  • ох, прочитал про то, что пользователь может менять цвет размер и т.д. понял что промахнулся с ответом... сорри. 20 сен 2012 в 9:55
2

Храните в базе и в куки в json-формате. Легко парсить javascript-ом. Проверяете - если в куки нет данных делаем ajax-запрос на подгрузку данных

1

Можно обратиться к тому же php-скрипту через AJAX, если вы это имели ввиду

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.