|
Итак, у вас есть своя web-страничка, сверстанная валидным XHTML'ем. К тому же, как порядочный веб-мастер, вы использовали каскадные таблицы стилей (css) для управления внешним видом своего сайта и даже потрудились сделать несколько альтернативных таблиц css, чтобы ну совсем все было шоколадно. Чудесно. Но теперь вам необходим кросс-браузерный способ переключения между этими самыми таблицами стилей.
Моделирование сайта
Таблицы стилей привязываются к сайту с помощью тега <link />. Есть три вида взаимотношения таблицы стилей с сайтом: фиксированный (persistent), предпочтительный (preferred) и альтернативный (alternate).
Фиксированный (persistent)
Такая таблица стилей всегда связана с документом (другими словами, она всегда «включена») и ее стили комбинируются со стилями активной таблицы. Чтобы зафиксировать таблицу стилей, необходимо ее атрибуту rel установить свойство "stylesheet" и не указывать атрибут title.
Т.е. чтобы сделать таблицу стилей default.css фиксированной, нужно поместить следующий код между тегами <head> и </head>
<link rel="stylesheet" type="text/css" href="default.css" />
Предпочтительный (preferred)
Эти таблицы стилей включены по умолчанию (они «включаются», при загрузке страницы). В последствии пользователь может их отключить, выбрав альтернативную таблицу. Чтобы сделать таблицу стилей предпочтительной, атрибуту rel говорим «stylesheet» и указываем ей заголовок (title).
Можно сгруппировать несколько предпочтительных таблиц, присвоив каждой свой заголовок. Сгруппированные таблицы стилей будут включаться и выключаться одновременно. Если объявить несколько групп предпочтительных таблиц, то первая будет иметь превоходство над остальными.
Итак, чтобы сделать таблицу стилей default.css предпочтительной, дадим ей уникальное название, добавив заголовок:
<link rel="stylesheet" type="text/css" href="default.css" title="blog standard" />
Альтернативный (alternate)
Такая таблица стилей может быть выбрана пользователем, как альтернативный вариант предпочтительной (preferred) таблице. С ее помощью посетитель может настроить сайт под себя, выбрав подходящую для него схему (структуру, шрифт и т.д.)
Чтобы задать альтернативную таблицу стилей, атрибуту rel говорим "alternate stylesheet" и даем таблице уникальный заголовок. Как и предпочтительные, эти таблицы могут быть сгруппированы путем присвоения им уникального заголовка.
Пользуясь предыдущим примером, сделаем default.css альтернативной. Для этого просто добавим в атрибут rel слово "alternate":
<link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />
Обратите внимание, что подобные отношения задаются только для внешних таблиц стилей, которые привязаны к сайту с помощью элемента link.
Меняем стили
Когда сайт загружается в первый раз, в работу вступают фиксированные и предпочтительные таблицы стилей. Альтернативные таблицы могут быть выбраны пользователем вручную. Да и W3C ратует за то, чтобы браузеры предлагали нам таблицы стилей на выбор, и, возможно, были доступны из выпадающей менюшки или панели инструментов.
Пока все гладко. У нас есть несколько css-ок и пользователь может в меню выбрать себе любую по вкусу. Но вот и первая ложка дегтя. Причем большая. В браузере FireFox (Mozilla) для выбора стиля странички достаточно зайти в закладку «вид» (view) и поставить галочку напротив нужного стиля. А вот в ослике (MSIE — Microsoft Internet Explorer) ничего подобного нету. В итоге, у нас есть набор стилей, но нет возможности переключаться между ними в MSIE.
И тут нам поможет капля JavaScript?a вместе с DOM (Document Object Model), чтобы и посетители, использующие осликов (MSIE), так же могли переключаться между стилями. К тому же позаботимся о том, чтобы их выбор можно было поместить в куки (cookie). И при этом наш скрипт никак не навредит пользователям Mozilla.
Скрипт
Для начала нам нужно научить скрипт различать три типа таблиц стилей (о которых мы говорили в начале). Сделать это относительно не трудно. Надо только в каждом элементе link проверить два атрибута.
Это ссылка на таблицу стилей?
HTMLLinkElement.getAttribute("rel").indexOf("style") != -1
У нее есть атрибут "заголовок" (title)?
HTMLListElement.getAttribute("title")
Атрибут rel содержит ключевое слово "alternate"?
HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1
Обратите внимание, что мы делаем проверку по строке "alt", так как некоторые браузеры принимают ключевое слово "alternative" вместо "alternate". Используя эти три проверки, напишем непосредственно функцию переключения стилей. Потребуется пробежаться по всем элементам link в нашем документе, деактивируя все предпочтительные и альтернативные таблицы стилей, которые должны быть отключены, и активируя те, которые должны включиться при загрузке странички. Обратите внимание, что только предпочтительные и альтернативные таблицы стилей содержат в элементе link атрибут заголовка (title)
Функция переключения выглядит где-то так:
function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } }
Печеньки (Cookies)
Мы можем менять стиль странички. Круто. А наши посетители получили возможность выбора персональных настроек для странички. Но пока только именно для странички, а не всего сайта. Покидая страничку пользователя также покинут и персональные настройки. В этой ситуации нам как раз и помогут печеньки или куки. Кому как удобнее. Чтобы выводить из куков текущий стиль, нам понадобится еще одна функция. А так же еще две функции, чтобы сохранять в куки и читать из куков.
Чтобы вернуть текущий стиль, ищем активную предпочтительную или альтернативную таблицу стилей и проверяем ее заголовок. Как?
Во-первых, опять пробегаем по всем элементам link документа. Затем убеждаемся, что link — это таблица стилей. Далее проверяем, есть ли у нее заголовок. Этого достаточно, чтобы выявить предпочтительную или альтернативную таблицу стилей. Последней проверкой необходимо убедиться, что выбранная таблица активна. Если все три проверки возвращают нам true, то мы нашли активную таблицу и можем возвратить ее заголовок.
Функция будет выглядеть так:
function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; }
Так как эта статья про стили, а не про печеньки, я не буду объяснять работу следующих функций с куками.
function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }
Чтобы использовать последние функции нам понадобится ввести обработчики событий onload и onunload.
Onload
Это предустановленный атрибут объектной модели документа (DOM, level 2) определенный w3c, «disabled», т.е. устанавливается в false после того, как таблица стилей применяется к документу. Этот атрибут корректно работает в Мозилле, но в Осле (IE), к сожалению, нет. У ослика есть собственный HTML атрибут, также известный как «disabled», применяемый к элементам link. Эта штука изначально имеет значение false для элементов link. Чтобы заставить ослиный атрибут работать так же, как и человеческий DOM level 2 disabled атрибут, мы можем вызвать функцию setActiveStyleSheet() с именем предпочтительной таблицы стилей. Чтобы выяснить какая таблица у нас предпочтительная, используем еще одну функцию. Т.к. она по сути очень похожа на функцию getActiveStyleSheet(), я не буду объяснять, как она работает:
function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; }
В функции onload мы в первую очередь определяем переменную title, которая либо содержит значение предыдущей таблицы стилей сохраненной в куках или, в случае, когда таковой нету, заголовок нашей предпочтительной таблицы. Далее вызываем функцию setActiveStyleSheet(), которая помещает заголовок в переменную title. Функция onload выглядит следующим образом:
window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); }
Обратите внимание, что желательно вызывать эту функцию до события onload, чтобы документ отдал предпочтение нашей таблице стилей. Но убедитесь, чтобы onload, вызывалась после того, как будут определены остальные функций и элементы link.
Onunload
Сохранить куки в событие onunload проще. Все что нам понадобится, это функция getActiveStyleSheet(), чтобы возвратить активную таблицу стилей и сохранить ее в куках.
Вот что получим:
window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); }
Соберем все вместе
Итак, мы стоим на пороге того, чтобы сделать ваш сайт более привлекательным. Все что понадобится - включить все эти функции в ваш документ. Чтобы облегчить задачу, я собрал их все в один .js-документ
Чтобы подключить этот файлик к своему сайту вставьте между тегами <head> и </head> простой код HTML
<script type="text/javascript" src="/scripts/styleswitcher.js"></script>
Но убедитесь, чтобы эта строка была помещена после всех элементов link.
Чтобы пользователь смог переключаться между активными таблицами стилей, используйте событие onclick. Например, чтобы пользователь мог переключатся между таблицами "default.css" и "paul.css" используйте следующий код HTML:
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Выбрать стиль "default"</a> <a href="#" onclick="setActiveStyleSheet('paul'); return false;">Выбрать стиль "paul"</a>
Выбранный стиль будет сохранен в куки. Чтобы использовать один и тот же стиль для всего сайта, поместите ссылки на соответствующие css файлы и файл styleswitcher.js между тегами <head> и </head> каждой страницы.
| 
