Если вам понадобиться сделать поддержку тем оформления («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') ).
|
