Dleshka.org
Авторизация

Хак Переключение между файлами стилей CSS (jQuery styleswitch)

+28
TipTop 14-02-2010 Хаки DLE 0 комментариев
Переключение между файлами стилей CSS (jQuery styleswitch)


Суть Хака проста – одним кликом можно переключаться между файлами стилей CSS, в результате чего изменяется дизайн сайта. При этом, что самое важное, последний использованный (включенный) юзером дизайн сохраняется.

Практическое применение нереально просто: включаем воображение и придумываем что-то типа смена времён года по клику, либо что-нибудь простое типа смены дизайна сайта.
В общем придумывай и юзай...

Установка:
Качаем архив с двумя .js файлами и кидаем папку с ними либо в корень либо в шаблон.
Прописывам путь к ним в main.tpl или в файле котором будет применяться данный Хак:
<script type="text/javascript" src="styleswitch/jquery.min.js"></script>
<script type="text/javascript" src="styleswitch/styleswitch.js"></script>

Создаем .css файл и пишем в нем например:
#st2 {
    background-color:#ff9900;
    color: #ffffff;
    font-size: 12px;
    font-family: tahoma;
    padding-left: 6px;
}


И тогда блок на сайте который будет меняться при переключении, ну или вообще глобально весь body берем в div'ы:
<div id="st2">Блок или текст который будет изменяться при нажатии</div>


Ну и на конец пишем две ссылки или делаем кнопки для переключения например так:
<ul>
      <li><a href="serversideSwitch.html-style=style1.htm" rel="styles2" class="styleswitch">кнопка 1</a></li>
        <li><a href="serversideSwitch.html-style=style2.htm" rel="styles1" class="styleswitch">кнопка 2</a></li>
    </ul>
Информация
Зарегистрируйтесь чтобы комментировать публикацию.
Авторизация