- 3282
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Будем делать смену стилей сайта с запоминанием на Cookie .Это возможность сделать кнопки смены оформления, фона, расцветки панелей или дизайна на основе CSS . Ваш пользователь cможет выбрать сам оформление сайта.
Это пример создания разных дополнительных стилей для сайта с использованием JS скриптов.
Установка :
1.В JS/ папке шаблона создать файл foot_global.js и в него поместить код
Код:
//<![CDATA[
var manual_or_random = "manual" //"manual" - ручной, "random" - случайный
var randomsetting = "3 days" //"eachtime" - смена каждый раз, "sessiononly" - смена каждой сессия, "x days" (заменить х на желаемое число) . Применяется только, если режим является случайным.
//////// Код ниже нет необходимости редактировать /////////
function getCookie(Name) {
var re = new RegExp(Name + "=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
var expstring = (typeof days != "undefined") ? expireDate.setDate(expireDate.getDate() + parseInt(days)) : expireDate.setDate(expireDate.getDate() - 5)
document.cookie = name + "=" + value + "; expires=" + expireDate.toGMTString() + "; path=/";
}
function deleteCookie(name) {
setCookie(name, "moot")
}
function setStylesheet(title, randomize) {
var i, cacheobj, altsheets = [""]
for (i = 0;
(cacheobj = document.getElementsByTagName("link")[i]); i++) {
if (cacheobj.getAttribute("rel").toLowerCase() == "alternate stylesheet" && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
altsheets.push(cacheobj)
if (cacheobj.getAttribute("title") == title)
cacheobj.disabled = false
}
}
if (typeof randomize != "undefined") {
var randomnumber = Math.floor(Math.random() * altsheets.length)
altsheets[randomnumber].disabled = false
}
return (typeof randomize != "undefined" && altsheets[randomnumber] != "") ? altsheets[randomnumber].getAttribute("title") : ""
}
function chooseStyle(styletitle, days) {
if (document.getElementById) {
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element) {
if (selectedtitle != null && (element.type == undefined || element.type == "select-one")) {
var element = (element.type == "select-one") ? element.options : element
for (var i = 0; i < element.length; i++) {
if (element[i].value == selectedtitle) {
if (element[i].tagName == "OPTION")
element[i].selected = true
else
element[i].checked = true
break
}
}
}
}
if (manual_or_random == "manual") {
var selectedtitle = getCookie("mysheet")
if (document.getElementById && selectedtitle != null)
setStylesheet(selectedtitle)
} else if (manual_or_random == "random") {
if (randomsetting == "eachtime") setStylesheet("", "random")
else if (randomsetting == "sessiononly") {
if (getCookie("mysheet_s") == null)
document.cookie = "mysheet_s=" + setStylesheet("", "random") + "; path=/"
else setStylesheet(getCookie("mysheet_s"))
} else if (randomsetting.search(/^[1-9]+ days/i) != -1) {
if (getCookie("mysheet_r") == null || parseInt(getCookie("mysheet_r_days")) != parseInt(randomsetting)) {
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting))
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting))
} else setStylesheet(getCookie("mysheet_r"))
}
}
//]]>
Код:
<!--Cookie стиль-->
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="{tpl_url}/style/style-green.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="blye-theme" href="{tpl_url}/style/style-blye.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-theme" href="{tpl_url}/style/style-red.css" disabled="">
<link rel="alternate stylesheet" type="text/css" media="screen" title="yellow-theme" href="{tpl_url}/style/style-yellow.css" disabled="">
<!--Cookie стиль-->
Код:
<script type="text/javascript" src="{tpl_url}/js/foot_global.js"></script>
Код:
<div id="settings">
<a class="colorbox colororange" href="javascript:chooseStyle('none', 60)"></a>
<a class="colorbox colorgreen" href="javascript:chooseStyle('green-theme', 60)"></a>
<a class="colorbox colorblye" href="javascript:chooseStyle('blye-theme', 60)"></a>
<a class="colorbox colorred" href="javascript:chooseStyle('red-theme', 60)"></a>
<a class="colorbox coloryellow" href="javascript:chooseStyle('yellow-theme', 60)"></a>
</div>
Код:
/** Смена стилей **/
#settings{border: 1px solid;display: block;font-size: 0;line-height: 0;}
#settings .colorbox{display: inline-block;margin: 8px;height: 27px;width: 27px;}
#settings .colororange{background: #f60;}
#settings .colorgreen{background: #0C0;}
#settings .colorblye{background: #08C;}
#settings .colorred{background: #F00;}
#settings .coloryellow{background: #FFF500;}
style-green.css
style-blye.css
style-red.css
style-yellow.css
и в них прописывать доп стили которые и будут изменять /
Можешь почитать и вот эту статейку "Теги iframe"

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.