[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Архив » Архив » Локальное хранилище браузера (localStorage)
Локальное хранилище браузера (localStorage)
RuDДата: Четверг, 26.06.14, 22:08:30 | Сообщение # 1
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Как можно сделать вместо текстовой кнопки, на кликабельную или картинку?
Рабочий пример этого кода: ССЫЛКА
вот сам код:

Код
<div id="apobutton1"></div>    
<div id="apocontent1" style="display:none">Какой-то контент    
<br/>Какой-то контент    
<br/>Какой-то контент    
<br/>Какой-то контент    
<br/>    
</div>    

<script>    
if (localStorage.getItem('apostore1')) {    
$('#apobutton1').html('Закрыть блок');    
$('#apocontent1').slideDown(0);    
} else {    
$('#apobutton1').html('Открыть блок');    
};    

$('#apobutton1').click(function() {    
if(localStorage.getItem('apostore1')) {    
localStorage.removeItem('apostore1');    
$('#apobutton1').html('Открыть блок');    
$('#apocontent1').slideUp(300);    
} else {    
localStorage.setItem('apostore1', 1);    
$('#apobutton1').html('Закрыть блок');    
$('#apocontent1').slideDown(300);    
};    
});    
</script>

Сообщение отредактировал RuD - Четверг, 26.06.14, 22:12:28
 
ApocalypseДата: Четверг, 26.06.14, 22:34:15 | Сообщение # 2
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
Код
<div id="apobutton1" style="cursor:pointer"></div>
 
RuDДата: Четверг, 26.06.14, 22:46:12 | Сообщение # 3
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Apocalypse, можно еще на картину сделать? хочу что бы картинкой открывалось, а текстом закрывалось, осталось только узнать как картиной открывать и все)
 
RuDДата: Четверг, 26.06.14, 22:54:51 | Сообщение # 4
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
в чем то разобрался,но картинку растягивает..
Код
<div id="apobutton1" style="cursor:pointer; background-image: url('http://images.gif');"></div>

Сообщение отредактировал RuD - Четверг, 26.06.14, 23:03:42
 
ApocalypseДата: Четверг, 26.06.14, 23:11:06 | Сообщение # 5
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
RuD, подучи основы css. http://htmlbook.ru/css
 
RuDДата: Четверг, 26.06.14, 23:13:25 | Сообщение # 6
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Apocalypse, подучиваю, только разобраться не могу уже запутался больше.. вроде саму судь понял, мне надо значение которое убирает повтор картинки
 
ApocalypseДата: Пятница, 27.06.14, 02:18:32 | Сообщение # 7
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
Цитата RuD
мне надо значение которое убирает повтор картинки
http://htmlbook.ru/css/background-repeat
 
RuDДата: Пятница, 27.06.14, 23:03:03 | Сообщение # 8
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Цитата Apocalypse
http://htmlbook.ru/css/background-repeat


спасибо научился :)

можно еще поменять местами?
что бы заходивший пользователь сразу видел чат, а не открывал его, ковырялся-ковырялся так и не разобрался.. помоги если не трудно, заранее благодарен.

пример тут: http://jsfiddle.net/zbst/bXd9s/

Код

     <div id="apobutton1" style="cursor:pointer" class="button_zbst"></div>
<div id="apocontent1" style="display:none">$CHAT_BOX$</div>    

    <style>
     .button_zbst {
     border-top: 1px solid #6ca8d9;
     background: #65a9d7;
     background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
     background: -webkit-linear-gradient(top, #2679bd, #0b5c9e);
     background: -moz-linear-gradient(top, #3e779d, #65a9d7);
     background: -ms-linear-gradient(top, #3e779d, #65a9d7);
     background: -o-linear-gradient(top, #3e779d, #65a9d7);
     padding: 7px 14px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;

     color: white;
     font-size: 14px;
     font-family: Helvetica, Arial, Sans-Serif;
     text-decoration: none;
     vertical-align: middle;
     }
.button:hover {
     border-top-color: #4f7b9e;
     background: #06487d;
     }
.button:active {
     border-top-color: #1b435e;
     background: #1b435e;
     }
     </style>
          

<script>     
if (localStorage.getItem('apostore1')) {     
$('#apobutton1').html('Закрыть чат');     
$('#apocontent1').slideDown(0);     
} else {     
$('#apobutton1').html('Открыть чат');     
};     

$('#apobutton1').click(function() {     
if(localStorage.getItem('apostore1')) {     
localStorage.removeItem('apostore1');     
$('#apobutton1').html('Открыть чат');     
$('#apocontent1').slideUp(300);     
} else {     
localStorage.setItem('apostore1', 1);     
$('#apobutton1').html('Закрыть чат');     
$('#apocontent1').slideDown(300);     
};     
});     
</script>

Сообщение отредактировал RuD - Пятница, 27.06.14, 23:05:48
 
DefmanДата: Суббота, 28.06.14, 01:53:53 | Сообщение # 9
Майор
Группа: VIP
Сообщений: 91
Награды: 1
Репутация: 5
Замечания: 0%
Статус: Offline
Код
<div id="apocontent1" style="display:none">$CHAT_BOX$</div>

На
Код
<div id="apocontent1">$CHAT_BOX$</div>

Учи CSS.
 
RuDДата: Суббота, 28.06.14, 01:58:33 | Сообщение # 10
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Defman,
Цитата Defman
Учи CSS.

не правильно, проверь, увидишь.
я конечно ноль в этом, но кажется меняется в скрипте

Сообщение отредактировал RuD - Суббота, 28.06.14, 01:59:48
 
DefmanДата: Суббота, 28.06.14, 02:04:16 | Сообщение # 11
Майор
Группа: VIP
Сообщений: 91
Награды: 1
Репутация: 5
Замечания: 0%
Статус: Offline
Проверил - отображается с самого начала.
Код поменяется немного чисто из-за логики.
Код

if (localStorage.getItem('apostore1')) {  
$('#apobutton1').html('Открыть чат');  
$('#apocontent1').slideDown(0);  
} else {  
$('#apobutton1').html('Закрыть чат');  
};  

$('#apobutton1').click(function() {  
if(localStorage.getItem('apostore1')) {  
localStorage.removeItem('apostore1');  
$('#apobutton1').html('Открыть чат');  
$('#apocontent1').slideUp(300);  
} else {  
localStorage.setItem('apostore1', 1);  
$('#apobutton1').html('Закрыть чат');  
$('#apocontent1').slideDown(300);  
};  
});  

Сообщение отредактировал Defman - Суббота, 28.06.14, 02:05:33
 
RuDДата: Суббота, 28.06.14, 02:14:44 | Сообщение # 12
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Defman, обновляй страницу, там что то криво все получилось, не запоминает.
 
DefmanДата: Суббота, 28.06.14, 02:18:00 | Сообщение # 13
Майор
Группа: VIP
Сообщений: 91
Награды: 1
Репутация: 5
Замечания: 0%
Статус: Offline
Обновил 10 раз. Все сохраняется.
 
RuDДата: Суббота, 28.06.14, 02:19:30 | Сообщение # 14
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Defman, проверил, твой скрипт +
Код
<div id="apocontent1" style="display:none">$CHAT_BOX$</div>


если без
Код
style="display:none"


почему то не хотел запоминать..
 
DefmanДата: Суббота, 28.06.14, 02:21:38 | Сообщение # 15
Майор
Группа: VIP
Сообщений: 91
Награды: 1
Репутация: 5
Замечания: 0%
Статус: Offline
CSS никак не влияет на JS... Так что хз))
 
RuDДата: Суббота, 28.06.14, 02:28:44 | Сообщение # 16
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Defman, вот посмотри, не знаю конечно но у меня вот так
тут с стилем и после обновления остается все на своих местах: http://jsfiddle.net/zbst/TCAwH/
тут без стиля и не запоминает.. но я не понимаю, может это у меня браузер так лагает? http://jsfiddle.net/zbst/TCAwH/1/

Но все равно проблема решена, спасибо тебе))
 
DefmanДата: Суббота, 28.06.14, 02:32:39 | Сообщение # 17
Майор
Группа: VIP
Сообщений: 91
Награды: 1
Репутация: 5
Замечания: 0%
Статус: Offline
У меня все в норме. Походу твой браузер глючит, либо JSfiddle глючит)
 
RuDДата: Суббота, 28.06.14, 02:38:25 | Сообщение # 18
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Defman, а через какой ты браузер сидишь?) я через хром и яндекс проверил, везде без стиля не запоминает)
 
DefmanДата: Суббота, 28.06.14, 02:39:26 | Сообщение # 19
Майор
Группа: VIP
Сообщений: 91
Награды: 1
Репутация: 5
Замечания: 0%
Статус: Offline
Firefox (Iceweasel) 29. Под Линуксом))
 
RuDДата: Суббота, 28.06.14, 02:49:38 | Сообщение # 20
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Defman, ну тогда я не знаю)
 
ApocalypseДата: Суббота, 28.06.14, 11:52:17 | Сообщение # 21
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
RuD,
Код
<style>
.button_zbst {
     border-top: 1px solid #6ca8d9;
     background: #65a9d7;
     background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
     background: -webkit-linear-gradient(top, #2679bd, #0b5c9e);
     background: -moz-linear-gradient(top, #3e779d, #65a9d7);
     background: -ms-linear-gradient(top, #3e779d, #65a9d7);
     background: -o-linear-gradient(top, #3e779d, #65a9d7);
     padding: 7px 14px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     color: white;
     font-size: 14px;
     font-family: Helvetica, Arial, Sans-Serif;
     text-decoration: none;
     vertical-align: middle;
}
.button:hover {
     border-top-color: #4f7b9e;
     background: #06487d;
}
.button:active {
     border-top-color: #1b435e;
     background: #1b435e;
}
</style>
<div id="apobutton1" style="cursor:pointer" class="button_zbst"></div>
<div id="apocontent1" style="display:none">$CHAT_BOX$</div>
<script>
if (!localStorage.getItem('apostore1')) {
     $('#apobutton1').html('Закрыть чат');
     $('#apocontent1').slideDown(0);
} else {
     $('#apobutton1').html('Открыть чат');
};

$('#apobutton1').click(function () {
     if (!localStorage.getItem('apostore1')) {
         localStorage.setItem('apostore1',1);
         $('#apobutton1').html('Открыть чат');
         $('#apocontent1').slideUp(300);
     } else {
         localStorage.removeItem('apostore1');
         $('#apobutton1').html('Закрыть чат');
         $('#apocontent1').slideDown(300);
     };
});
</script>
Вот ЗДЕСЬ можешь проверить работу кода
 
RuDДата: Суббота, 28.06.14, 12:02:31 | Сообщение # 22
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Apocalypse, спасибо, все работает правильно)
 
ApocalypseДата: Суббота, 28.06.14, 12:40:37 | Сообщение # 23
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
RuD, на здоровье. Тему в архив?
 
RuDДата: Суббота, 28.06.14, 12:47:13 | Сообщение # 24
Лейтенант
Группа: Чатер
Сообщений: 54
Награды: 0
Репутация: 0
Замечания: 20%
Статус: Offline
Apocalypse, Теперь да)
 
Форум » Архив » Архив » Локальное хранилище браузера (localStorage)
  • Страница 1 из 1
  • 1
Поиск: