Вступление.
В
предыдущей статье я рассмотрел технологию и методику подгрузки ява-скриптов "на лету", по мере необходимости. Однако еще более широкое поле для применения этой технологии открывается в области изменения визуального отображения страниц.
Общепринятой практикой и даже нормой в современном оформлении страниц сайтов (в том числе, конечно, и
сайтов на Joomla) является использование Каскадных таблиц стилей, или CSS.
С ним (с CSS) мы и будем работать.
Обоснование.
Сразу оговоримся - никакой острой и насущной необходимости в смене стиля страницы "на лету" (да и НЕ "на лету" тоже) совершенно нет - казалось бы, страница сформирована, сверстана и готова для показа посетителю, чего же еще? И если вы сторонник такого подхода - можете не читать дальше эту статью.
А для тех, кто считает, что комфорт, удобство и забота о пользователе никогда не бывают лишними (тем более, если обеспечить это можно ценой столь незначительных усилий, как я и постараюсь показать в этой статье) - идем дальше, и будем внедрять в нашу страницу возможность
менять стили (цветовое оформление) "на лету", без перезагрузки страниц.
Методология.
Так же, как это описано и в
первой статье, практически идеальным решением этой проблемы будет загрузка и применение новых, измененных CSS "по требованию", только в том случае, когда посетитель явным образом выразит такое желание (путем клика по соответствующему объекту на странице - кнопке или ссылке). Для этого мы реализуем механизм, который будет "подгружать" необходимые файлы CSS, меняя оформление страницы целиком или отдельных ее частей.
Такой метод носит название OnDemand, или в моем вольном переводе -
"Остановка по требованию".
Пример.
Создадим на своей страничке (в модуле, в компоненте) простую таблицу, в которой разместим некоторые данные.
| Код: |
|
HTML
<table width="100%">
<tr>
<td class="mytd_1" width="100%">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td class="mytd_2" width="100%">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
|
Создадим CSS - файл с названием
MYCSS.CSS, определяющий разцветку ячеек таблицы:
| Код: |
|
CSS mycss.css
.mytd_1 {
background:red;
color:white;
}
.mytd_2 {
background:red;
color:white;
}
|
Подключим наш CSS - файл в секцию HEADER страницы:
| Код: |
|
HTML
<head>
<link href="mycss.css" rel="stylesheet" type="text/css" media="screen" />
</head>
|
Теперь при открытии страницы мы увидим табличку из 2х ячеек с красным фоном и белым цветом текста.
А теперь, в соответствии с поставленной задачей, создадим посетителю возможность "на лету" менять по своему вкусу цветовое оформление таблицы.
Решение.
Для этого сначала нужно создать 2 дополнительных CSS - файла, в которых определить другое цветовое оформление таблицы. Мы сделаем 1-й файл с синим фоном таблицы, а 2-й с зеленым.
И назовем их соответственно
MYCSS-1.CSS и
MYCSS-2.CSS:
| Код: |
|
CSS mycss-1.css
.mytd_1 {
background:blue;
color:white;
}
.mytd_2 {
background:blue;
color:white;
}
|
| Код: |
|
CSS mycss-2.css
.mytd_1 {
background:green;
color:white;
}
.mytd_2 {
background:green;
color:white;
}
|
Теперь осталась "самая малость" -
обеспечить смену этих 3х стилей "на лету".
Технология метода настолько проста, что не вызовет никакой сколько-нибудь существенной дополнительной нагрузки на интерфейс, сервер или броузер.
Для ее реализации мы снова используем метод javascript
appendChild.
Создадим в нашем документе функцию для автоматической подгрузки CSS "на лету":
| Код: |
|
HTML
<script type="text/javascript">
function loadCSSOnDemand(filename) //принимаем имя нужного файла CSS (filename) в качестве входного аргумента функции
{
var newCSS = document.createElement("link"); //создаем новый объект типа link
newCSS.setAttribute("rel", "stylesheet"); //присваиваем ему атрибут css-файла
newCSS.setAttribute("type", "text/css"); //присваиваем ему атрибут css-файла
newCSS.setAttribute("href", filename); //присваиваем ему атрибут источника - наш файл filename
document.getElementsByTagName("head")[0].appendChild(newCSS); //присоединяем скрипт к хедеру страницы
}
</script>
|
Фактически, задача выполнена! Теперь достаточно "повесить" вызов нашей новой функции на событие onclick кнопок или ссылок, передав в качестве параметра имя CSS-файла, который надо подгрузить:
| Код: |
|
HTML
<a href="javascript:void(0);" onclick="loadCSSOnDemand('mycss-1.css')" title="Синий">
Синий
</a>
<a href="javascript:void(0);" onclick="loadCSSOnDemand('mycss-2.css')" title="Зеленый">
Зеленый
</a>
<a href="javascript:void(0);" onclick="loadCSSOnDemand('mycss.css')" title="По умолчанию">
По умолчанию
</a>
|
Теперь при нажатии на ссылку "Синий" или "Зеленый" нужный CSS - файл будет "на лету" загружен в страницу и применен, наша таблица мгновенно изменит цвет фона! Если же посетитель на ссылку не нажмет - новые CSS не будут загружены никогда!
Третья ссылка в нашем примере загружает первоначальный CSS для того, чтобы была возможность вернуться к первоначальной цветовой гамме.
Остается только добавить, что возможности этого метода, разумеется, не ограничены только изменением цветовой гаммы - вы можете "прописать" в новых CSS - файлах любые изменения (изменить фоновые картинки, цвета и размер бордюров, изображения и т.д. и т.п.) -
все эти изменения будут автоматически применены к странице при клике по ссылкам!
Пробуйте, экспериментируйте, придумывайте!
Важное замечание:
Очевидно, что сделанные таким методом изменения стиля страницы сохраняться только в пределах текущего просмотра. Если посетитель сменит страницу или даже обновит эту же страницу - стиль вернется к первоначальному виду.
Для того, чтобы выбранный пользователем стиль был запомнен и сохранялся при смене страниц, а так же был воспроизведен при его следующем посещении сайта - нужен механизм, осуществляющий "запоминание" выбора и его воспроизведение при следующем визите.
Такой механизм можно создать.
Но это - тема уже совсем другой статьи!
