Запоминание стиля кнопок bootstrap 3 в cookie
Всем привет!
Уже голову сломал себя, что только не пробовал, никак не могу прикрутить скрипт для запоминания состояния кнопок.Через сторож тоже пробовал. http://308712.motoya.web.hosting-test.net/ Кнопки слева "В наличии и под заказ" где каталог товаров. Вот так они меняются:
<script type="text/javascript">
$(".all").click(function(){
$(this).removeClass("btn-xs");
$(this).addClass("btn-md");
$(this).css("font-size","10pt");
$(".ok").removeClass("btn-md");
$(".ok").addClass("btn-xs");
$(".ok").css("font-size","8pt");
})
$(".ok").click(function(){
$(this).removeClass("btn-xs");
$(this).addClass("btn-md");
$(this).css("font-size","10pt");
$(".all").removeClass("btn-md");
$(".all").addClass("btn-xs");
$(".all").css("font-size","8pt");
})
</script>
После обновления страници кнопки естественно принимают свой первоначальный стиль. Может у кого есть идеи? |
Цитата:
При изменении состояния, записывать нужную информацию о том состоянии... А при загрузке документа прочитать информацию о состоянии и восстановить оное... |
Я так и делал, оказалось у меня в кукие тупо не записывалось, друг с другом скрипты мозги парят, буду пробовать заново....
|
Блин я уже упростил как мог все равно не получается.Хочу хоть цвет блока чтоб запоминалось.Смотрю через алерт все записывает,в веб инспекторе тоже. Видимо я не могу достать из куки информацию, не так читаю ее что ли.
.all{
height: 50px;
width: 70;
background: #b17902;
}
<div class="all"></div>
<script type="text/javascript">
$(".all").click(function(){
$(".all").css("background" , "#009900");
var color = $(".all").css('background');
$.cookie(".all", color);
alert('Записано :'+color);
if($.cookie(".all")) {
var al = $.cookie(".all");
$(".all").css({
'background': al
})
}
})
</script>
|
Цитата:
<div class="all">all</div>
fucntion set(value) {
$.cookie('myCoolie',value);
}
function get(name) {
return $.cookie('name');
}
$(".all").click(function(){
set('myColor','grey');
$(this).css({
background:get('myColor');
})
})
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Вот еще не пойму если я записываю один CSS стиль то все работает.
<script type="text/javascript">
$(".all").click(function(){
$(this).css("background" , "#009900");
var color = $(".all").css('background');
$.cookie(".all",color);
alert('Записано :'+color);
});
if($.cookie(".all")) {
var al = $.cookie(".all");
$('.all').css({
'background': al
})
</script
А если начинаю записывать хотя бы еще один , то скрипт перестает возвращать данные из куки
$(".all").click(function(){
$(this).css("background" , "#009900");
$(this).css("height" , "60px");
var color = $(".all").css('background');
var height = $(".all").css('height');
var arrCoHe = color+ "," +height;
$.cookie(".all", arrCoHe);
alert('Записано :'+arrCoHe);
});
if($.cookie(".all")) {
var al = $.cookie(".all");
var arrCoHe = al.split(",");
$('.all').css({
'background': arrCoHe[0],
'height': arrCoHe[1]
})
}
|
_ZET_, когда описываешь какую-то проблему, желательно делать полный тестовый пример... Его можно запустить. На нем можно что-то показать. ;)
А эти твои огрызки - они просто бесполезны. |
Цитата:
<!DOCTYPE html>
<html>
<head lang="ru">
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.cookie.js"></script>
<title>Тест</title>
</head>
<body>
<style>
.all{
height: 50px;
width: 70px;
background: #b17902;
}
</style>
<div class="all"></div>
<script type="text/javascript">
$(".all").click(function(){
$(this).css("background" , "#009900");
$(this).css("height" , "60px");
var color = $(".all").css('background');
var height = $(".all").css('height');
var arrCoHe = color+ "," +height;
$.cookie(".all", arrCoHe);
alert('Записано :'+arrCoHe);
});
if($.cookie(".all")) {
var al = $.cookie(".all");
var arrCoHe = al.split(",");
$('.all').css({
'background': arrCoHe[0],
'height': arrCoHe[1]
})
}
</script>
</body>
</html>
jquery.cookie.js только придется еще качать.Со своего не могу подключить,он на shopscript 309 :) |
_ZET_, вот пример с локальным хранилищем...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
.all{
height: 50px;
width: 70px;
background: #b17902;
}
</style>
<script type='text/javascript'>
$(function(){
$(".all").click(function(){
var color = "#009900";
var height = "60px";
$(this).css("background-color" , color);
$(this).css("height" , height);
var arrCoHe = color+ "," +height;
localStorage.setItem("all", arrCoHe);
});
var al=localStorage.getItem("all");
if(al) {
var arrCoHe = al.split(",");
$('.all').css({
'background': arrCoHe[0],
'height': arrCoHe[1]
})
}
});
</script>
</head>
<body>
<div class="all"></div>
</body>
</html>
|
Отлично, но пока сделал тупо через смену картинки вместо кнопки со стилями:)
Спасибо!:dance: |
| Часовой пояс GMT +3, время: 16:19. |