dle.in.ua » Хаки » jQuery styleswitch – переключение между файлами стилей CSS

jQuery styleswitch – переключение между файлами стилей CSS

Автор: unnamedman от 14-02-2010, 14:41
jQuery styleswitch – переключение между файлами стилей CSS

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

Практическое применение нереально просто: включаем воображение и придумываем что-то типа смена времён года по клику, либо что-нибудь простое типа смены дизайна сайта.
В общем придумывай и юзай... smile
Установка:
Качаем архив с двумя .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>

Вот так все просто.

Демо можно глянуть тут: http://dle.yooclub.net/styleswitch.html

styleswitch.rar [19.1 Kb] (cкачиваний: 105)
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Супер! Спасибо огромное! Везде искал реализацию данного хака!
    • yeaahhh
    • Регистрация: --
    • Репутация: (||)
    • 14 февраля 2010 16:22
    • 1
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 75
  • Публикаций: 15
  • Дак если будешь еще что-то искать смело пиши на форум сайта что у меня в подписи. wink

    --------------------
    • unnamedman
    • Регистрация: 26.07.2008
    • Репутация: (0|0|0)
    • 14 февраля 2010 16:24
    • 2
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 30
  • Публикаций: 1
  • Нажал на стиль1 нифига не работает.
    Кстати, эта идея была реализована еще в шаблоне ER-transformer. Но за старания спасибо.
    • acelote
    • Регистрация: 25.03.2009
    • Репутация: (2|1|-1)
    • 15 февраля 2010 00:05
    • 3
    ^
  • Группа: User
  • Icq: 8245731
  • Комментариев: 20
  • Публикаций: 6
  • не працює... може хтось напише детальнішу інструкцію???
    у мене просто перезагружає сторінку..але нічого не відбувається...
    • DatiX
    • Регистрация: 29.11.2009
    • Репутация: (0|0|0)
    • 15 февраля 2010 02:33
    • 4
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Автор замути урок как такое на DLE сделать http://www.stilbuero.de/jquery/tabs/#fragment-11 а именно эфект Fade Effect
    • Heon
    • Регистрация: --
    • Репутация: (||)
    • 15 февраля 2010 10:02
    • 5
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 75
  • Публикаций: 15
  • Автор не здесь живет... wink

    --------------------
    • unnamedman
    • Регистрация: 26.07.2008
    • Репутация: (0|0|0)
    • 15 февраля 2010 12:02
    • 6
    ^
  • Группа: User
  • Icq: 8245731
  • Комментариев: 20
  • Публикаций: 6
  • ну так как на счот робочей инструкции?
    • DatiX
    • Регистрация: 29.11.2009
    • Репутация: (0|0|0)
    • 15 февраля 2010 16:52
    • 7
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.