Блог старого компьютера

Блог старого компьютера


Главная Jquery Переключение стилей на Jquery

Переключение стилей на Jquery

18.02.2013 15:26 Администратор Jquery
Печать PDF
В наше время стало довольно модным делать на сайте смену стилей в один клик. К примеру вы хотите организовать на сайте версию для слабовидящего населения, или же просто хотите сделать на сайте лампочку при нажатии на которую цвета бы инвертировались и сайт принимал темные ночные начертяни. Для переключения стилей будем использовать современную библиотеку jquery.

Мы с вами будем использовать самую простой метод смены стилей который осуществляется путем подмены атрибута href у тега <link>. Данный метод работает во всех современных браузерах таких как Opera, FireFox, Chrome. За работоспособность в старых версиях ишаковых динозавров ручатся не могу, к сожалению и проверить не могу потому что мой осел на столько вредный что и запускаться не хочет.

И так что нам потребуется. Для небольшого примера переключения стилей нам потребуется создать простой html документ и 2 файла содержащие таблицы стилей. В файлы таблиц стилей можно просто записать разные цвета для тега body, что сообственно я и сделал. И так допустим файлы стилей которые мы будем переключать созданы, перейдем к написанию разметки и исполняющего скрипта. Все вместе у нас будет выглядеть так:

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link id="style" rel="stylesheet" href="/style1.css" type="text/css" />
<script type="text/javascript">
var style=1;
$(document).ready(function(){
$('#button').click(function(){
if(style==1){
$('#style').attr('href', 'style2.css');
style=2;
}
else{
$('#style').attr('href', 'style1.css');
style=1;
}
});
});
</script>
</head>
<body>
<a href="#" id="button">Переключить стиль</a>
</body>
</html>

 Код представленный выше не делает ничего сложного, а просто как я уже гоорил меняет атрибут href тегу link имеющему id=style. Конечно же для переключения стилей добавленная переменная style которая хранит какой стиль сейчас используется и условие благодаря которому скрипт переключает стили.

Вот вроде бы и все остается только сделать хранение стиля в куках чтоб при переходах со страницу на страницу грузился выбранный стиль...

История по теме (осторожно фуфлокод)

Помню 3 года назад необходимо было создать сайт на котором по нажатию на лампочку подгружался другой стиль и сайт отображался в темном варианте. Тогда я использовал вот такой вот несколько идиотский код:

var dd=1;
function smen(){
if(dd==1) {
document.getElementById('style').innerHTML = '<LINK href="/style2.css" rel="stylesheet" type="text/css">';
loadjscssfile("style2.css", "css");
document.getElementById('lampa').innerHTML = '<img onclick="smen();" title="Выключай свет!" src="/dizign/lampa_off.png" alt="Свет">';
document.getElementById('logo').innerHTML = '<img style="border:none;" class="logo" src="/dizign/logo_off.png" alt="">';
setCookie("foo", "bar");
myVar = getCookie("foo");
dd=2;
}
else
{
document.getElementById('style').innerHTML = '<LINK href="/style.css" rel="stylesheet" type="text/css">';
loadjscssfile("style.css", "css");
document.getElementById('lampa').innerHTML = '<img onclick="smen();" title="Выключай свет!" src="/dizign/lampa.png" alt="Свет">';
document.getElementById('logo').innerHTML = '<img style="border:none;" class="logo" src="/dizign/logo.png" alt="">';
setCookie("foo", "bar2");
myVar = getCookie("foo");
dd=1;
}
}

 Тот кто разбирается поймет почему он идиотский. Все бы хорошо было в этом коде, но тогда я ни как не мог заствить работать его в IE6 итд. Пока не нашел следующую функцию в интернете:

function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}

Что делает данная функция я тогда практически не понимал, да мне было это и не важно, главное что она работала..

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?