Поддержка различных тем оформления сайта при помощи CSS и JS - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Пятница 09.12.2016

Поддержка различных тем оформления сайта при помощи CSS и JS


Если вам понадобиться сделать поддержку тем оформления («skins») для вашего сайта, то это можно просто организовать при помощи незамысловатого Javascript кода и CSS. При этом основная идея следующая: на сайт по умолчанию будет всегда подгружаться общий CSS-файл, определяющий неизменные стили для сайта, а при помощи JS мы будем создавать и внедрять на страницу новый элемент CSS-стилей.

Итак, файл стилей по умолчанию назовем «default.css». Он будет не изменен. А для смены темы сайта, мы предусмотрим на странице выпадающий элемент, HTML-тег SELECT. В нем то и будет находиться список всех доступных тем оформления сайта.
Имена CSS-файлов для хранения тем оформления будут theme2.css, theme3.css, итд. Для полного удобства применения темы сайта, мы также будем записывать в куки (cookies) выбранную тему в виде пути до CSS-файла. И таким образом, при загрузке шапки (head) страницы, если тема уже была ранее выбрана, она будет сразу же добавлена в разметку сайта.

Первым делом, напишем основную функцию, которая будет динамически изменять стилевое оформление сайта. Назовем её, для простоты, CSSThemeChanger. Ниже привожу код самой функции:

function CSSThemeChanger( url )
{
var url = url || '';
var head = document.getElementsByTagName('head')[0];
var myCSSTheme = document.getElementById('myCSSTheme') || null;

// создаем и добавляем элемент стилей на страницу
if( !myCSSTheme )
{
myCSSTheme = document.createElement('link');
myCSSTheme.id = 'myCSSTheme';
myCSSTheme.rel = 'stylesheet';
myCSSTheme.media = 'all';
head.appendChild( myCSSTheme );
}

myCSSTheme.href = url; // устанавливаем текущую тему (указанный адрес CSS-файла)
Cookie.set('theme', url); // записываем значение указанной темы в куки
}


Итак, тут всё просто: первый аргумент функции — строка с адресом до CSS-файла. Далее, если HTML-элемент «link» с идентификатором (id) равным «myCSSTheme» не был найден на странице, он единожды создается и добавляет в head.
В дальнейшем, нам остается только изменять адрес CSS-файла при помощи свойства href и уставнавливать куки. Всё!

Также, привожу код, для установки кукисов с помощью Javascript. Для удобства использония, создадим объект «Cookie», у которого будет два метода — «set» и «get», соответственно для установки и чтения куков.

Cookie = {
// метод для установки параметра в куки
'set': function( name, value, timeout, path )
{
var timeout = timeout || 1000*3600*24; // 24 часа
var date = (new Date((new Date()).getTime() + timeout)).toUTCString();
document.cookie = name + '=' + encodeURIComponent( value ) + ';expires=' + date + ';path=' + (path || '/');
},

// метод для считывания определенного параметра из куков
'get': function( name )
{
name = name || null;
var cookieVars = document.cookie.split(/; /)
for( var i in cookieVars)
{
var cookie = cookieVars[i].split('=')
if( name == cookie[0] ) return decodeURIComponent(cookie[1]);
}
}
}


Для того, чтобы выбранная тема устанавливалась при перезагрузке страницы из куков, необходимо в шапке «head» вызывать нашу функцию «CSSThemeChanger» со значением нужного параметра из куков. В нашем случае это будет вызов CSSThemeChanger( Cookie.get('theme') ).
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 1082 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]