Prototype Переключатель дизайна

Prototype's^Blog › Переключатель дизайна

21

12 2024

Переключатель дизайна

Дизайн сайтов юКоза опираются на стили CSS, где детально определяется вид каждого элемента страницы. Заменив, таблицу стилей CSS, мы трансформируем дизайн страницы, не вмешиваясь в его структуру. Сейчас у вас есть возможность дать вашим пользователям самим выбирать, каким они хотят видеть ваш сайт. Для этого нужно в дополнение к обычному CSS стилю (он останется стоять у вас по умолчанию) создать несколько дополнительных альтернативных стилей, между которыми и будет выбирать пользователь. Информация о предпочтенном пользователем дизайне сохранится у него в cookies, поэтому, зайдя на сайт снова, он увидит именно тот дизайн, который он выбрал. Но если он почистит cookies в браузере, то вернется к стандартному виду страниц.

Для начала скачайте скрипт (правая кнопка мыши > сохранить как...), загрузите его себе на сайт.
На всех страницах, на которые распространяется смена дизайна, сделайте следующие изменнения:

<html> <head> <link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="pink-theme" href="pink.css" /> <script src="styleswitch.js" type="text/javascript"></script> </head>

<body> <form id="switchform">Сам переключатель: <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Стандартный Дизайн<br /> <input type="radio" name="choice" value="blue-theme" onClick="chooseStyle(this.value, 60)">Голубой Дизайн<br /> <input type="radio" name="choice" value="pink-theme" onClick="chooseStyle(this.value, 60)">Розовый Дизайн </form> </body> </html>

Все, что вам нужно, это подставить вместо blue-theme и pink-theme свои значения, а также загрузить альтернативные стили, аналогичные blue.css и pink.css. Количество стилей по необходимости можно увеличить. 60 - количество суток, в течении которых, браузер будет помнить о выборе пользователя.

7346

Prototype

manual design switch, design, CSS, CSS switcher, design switcher, style sheet