Хотелось бы сделать на сайте сменный дизайн. Чтобы каждый юзер мог выбрать один из 3-4 вариантов, чтобы после входа/выхода выбранный диз сохранялся ну и тд и тп, всё "как у людей". Кто-нибудь пробовал подобное? Может кто-то даже реализовал?
Почему мудрено? Все просто. И как можно поменять дизайн без CSS...
Вобщем вот:
1. Создаем файл с JS, к примеру change_css.js.
В файл вставляем следующий код:
Code
// Ниже меняем значения по вкусу var expDays = 9999; // Сколько дней будут сохранятся настройки стиля var standardStyle = '2'; // Номер стандартного стиля(по умолчанию) var nameOfCookie = 'switchstyle'; // Имя печеньки var urlToCSSDirectory = 'http://www.my.my/styles/'; // Папка в которой хранятся стили
// Имена ваших файлов стилей, цифры в названиях соответствуют номеру стиля var ScreenCSS_1 = 'screen_1.css'; var ScreenCSS_2 = 'screen_2.css'; var ScreenCSS_3 = 'screen_3.css'; var ScreenCSS_4 = 'screen_4.css'; var ScreenCSS_5 = 'screen_5.css';
// Если вы используете отдельные стили для печати то поменяйте эти для того что бы стили для печати менялись тоже. Если нет то пропишите все точно так же как и выше // Например ваш первый стиль называется blahblah_1.css то вместо print_1.css вставьте blahblah_1.css var PrintCSS_1 = 'print_1.css'; var PrintCSS_2 = 'print_2.css'; var PrintCSS_3 = 'print_3.css'; var PrintCSS_4 = 'print_4.css'; var PrintCSS_5 = 'print_5.css';
/********************************************************************* НИЖЕ НИЧЕГО НЕ МЕНЯЕМ БЕЗ ЗНАНИЯ JS *********************************************************************/
// This is the main function that does all the work function switchStyleOfUser(){ var fontSize = GetCookie(nameOfCookie); if (fontSize == null) { fontSize = standardStyle; }
var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
// Function to get the settings of the user function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); }
// Function to get the settings of the user function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; }
// Function to remember the settings function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); }
// Function to remove the settings function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); }
// This function is used when the user gives his selection function doRefresh(){ location.reload(); }
// This will call the main function. Do not remove this, because otherwise this script will do nothing... document.write(switchStyleOfUser());
2. В этой строке - var urlToCSSDirectory = 'http://www.my.my/styles/'; меняем http://www.my.my/styles/ на путь квашим стилям.
3. В этих строках var ScreenCSS_1 = 'screen_1.css'; var ScreenCSS_2 = 'screen_2.css'; var ScreenCSS_3 = 'screen_3.css'; var ScreenCSS_4 = 'screen_4.css'; var ScreenCSS_5 = 'screen_5.css'; меняем screen_х.css на имена ваших файлов стилей, цифра в имени соответствует номеру стиля.
4. Эти строчки var PrintCSS_1 = 'print_1.css'; var PrintCSS_2 = 'print_2.css'; var PrintCSS_3 = 'print_3.css'; var PrintCSS_4 = 'print_4.css'; var PrintCSS_5 = 'print_5.css'; меняем на var ScreenCSS_1 = 'screen_1.css'; var ScreenCSS_2 = 'screen_2.css'; var ScreenCSS_3 = 'screen_3.css'; var ScreenCSS_4 = 'screen_4.css'; var ScreenCSS_5 = 'screen_5.css'; с именами ваших файлов стилей и в каждойстроке ScreenCSS заменяем на PrintCSS.
5. Сохраняем скрипт.
6. Заливаем скрипт на сайт.
7. В <head> вставляем <script type="text/javascript" src="changeStyle.js"></script>, changeStyle.js меняем на путь к вашему скрипту залитому на сайт.
8. Заливаем ваши файлы стилей на сайт в указаную вами дерикторию в строке var urlToCSSDirectory = 'http://www.my.my/styles/';.
9. В <body> вставляем этот код, там где мы хотим что бы отображалось "меню" переключения стилей:
BeSinLi, большой код.. Sigma, писал раньше на юкозе там еще jquery встроенный так сам код мне обошелся.. встрок на 10 небольше.. делал на куках сменный css. Подругому там нормально несделаешь. если у тебя пхп хостинг то вопрос в раздел чуть повыше
Господи же боже мой! Вы ненормальные тут все? Это в одну строку пишется (для тупых с комментариями - в три). Файлик js в аттаче - после редактирования - вешать в шапку страницы вместо линка на стили.
В вашей папке стилей должны обязательно быть стили default.css - стили по умолчанию, ну и могут наличествовать файлы дополнительных стилей любых названий, все названия файлов, которые вы хотите использовать в плюс необходимо внести в скрипт (защита от идиота, чтоб пользователи ни в коем случае не увидели сайт вообще без стилей).
Кука вешается совершенно спокойно до 3000 года, плевать когда она сдохнет. Если кука не найдена и не указан стиль вручную (тоесть не происходит переключение стиля) линкуется дефолтный стиль.
Переключение стилей на сайте осуществляется простым проходом по ссылке вида:
Все просто. 
