[Ликбез]
Форма входа
Логин:
Пароль:
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Плавное сворачивание / разворачивание блока + куки
Плавное сворачивание / разворачивание блока + куки
[1] Silgrion [24.05.2011, 13:53]
Как привязать к этому скрипту куки, чтобы у пользователя запоминалась какой блок скрыт (По его усмотрению), а какой нет? Целый день пытался сам сделать, не получилось. Помогите, пожалуйста!
[2] likbezz [24.05.2011, 19:26]
Silgrion,
Quote (Silgrion)
Как привязать к этому скрипту куки

А этот скрипт что отображает,скрывает?
Одни и те же элементы на всех страницах или разные?
... Это существенно ...
[3] likbezz [24.05.2011, 20:49]
Quote (Silgrion)
Целый день пытался сам сделать, не получилось. Помогите, пожалуйста!

Всё просто ведь, что сложно-то??? ...

Вот смотри:
Проверяем наличие куки, и, если есть, открываем нужные блоки:
Quote (JavaScript)
$('div.hideWrap a.hideBtn').each(function(i){var cookie=getCookie('hideBtn'+i);
if (cookie&&cookie.indexOf('show')>-1)$(this).toggleClass('show').siblings('div.hideCont').show();})

Где:
if (cookie&&cookie.indexOf('show')>-1) - проверяем наличие куки, и его/её ヅ значение. Если находим класс/значение “show” - открываем блок.
....

При клике, переписываем куку:
Quote (JavaScript)
$('div.hideWrap a.hideBtn').click(function(){
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
var hideBtn=$('div.hideWrap a.hideBtn').index($(this)),isShow=$(this).attr('class');
setCookie('hideBtn'+hideBtn,isShow,365);
return false;
});

Где:
var hideBtn=$('div.hideWrap a.hideBtn').index($(this)) - определяем элемент по его индексу.
isShow=$(this).attr('class'); - устанавливаем его текущее положение - скрыт или нет - по классу.
setCookie('hideBtn'+hideBtn,isShow,365); - записываем/переписываем куку, со значением: индекса элемента и его состоянием - классом.
....

Для этого необходимо подключить скрипт для кук.
☑ Скрипт _cookie.js - сжатый.
...

Весь код:


☑ Пример ... Плавное сворачивание / разворачивание блока. jQuery + Cookie (рабочий)
....


Quote (MoVeMix)
likbezz, все отлично, но как сделать, что бы по умолчанию блоки были открыты а не закрыты ка у тебя, что бы куки тоже запоминались?

- То же самое, с точностью до “наоборот” ...
Типа (это не единственный вариант, просто ещё одно исполнение):

CSS
Quote (CSS)
<style type="text/css">
.hideWrap{text-align:left;clear:both;}
.hideBtn{display:block;background:transparent url('http://likbezz.ru/_example/_img/_lib1/_minus.gif') no-repeat left center;font:bold 11px/15px Verdana,sans-serif;cursor:pointer;outline:none;padding:1px 14px 2px;}
.hideBtn.close{background-image:url('http://likbezz.ru/_example/_img/_lib1/_plus.gif');}
</style>

- Меняем местами иконки «плюс» и «минус». Меняем класс на «close»

JavaScript:
Quote (JavaScript)
<script type="text/javascript">
$(function(){
/* Start DocumentReady */
$('div.hideWrap a.hideBtn').each(function(i){var cookie=getCookie('hideBtn'+i);
if(cookie&&cookie.indexOf('close')!=-1){$(this).toggleClass('close').siblings('div.hideCont').hide();};
});
/* StartClickFunction */
$('div.hideWrap a.hideBtn').click(function(){
$(this).toggleClass('close').siblings('div.hideCont').slideToggle('normal');
var hideBtn=$('div.hideWrap a.hideBtn').index($(this)),isShow=$(this).attr('class');
setCookie('hideBtn'+hideBtn,isShow,365);return false;
});
/* End DocumentReady */
});
</script>

...
☑ Пример - Плавное сворачивание / разворачивание блока. jQuery + Cookie. Изначально открытые блоки ... (рабочий, не забываем чистить куки) ....
...


....
Прикрепления: 1844975.js (0.4 Kb)
[4] Silgrion [24.05.2011, 20:50]
Quote (likbezz)
Одни и те же элементы на всех страницах или разные?

Эти блоки расположены только на главной странице и больше нигде.
[5] likbezz [24.05.2011, 20:52]
Silgrion,
Quote (Silgrion)
Эти блоки расположены только на главной странице и больше нигде.

В таком случае - всё будет работать )))
[6] Silgrion [26.05.2011, 15:57]
А можно как-то вместо div, table и td использовать?
Проще говоря вместо этого -
Code
<div class="hideWrap">   
   <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a>   
   <div class="hideCont">Здесь располагается содержимое  class "hideCont"</div>   
   </div>


это
Code
<table class="hideWrap">
<tr><td><a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a></td></tr>
<tr><td  class="hideCont">Здесь располагается содержимое  class "hideCont"</td></tr>
</table>


Сообщение отредактировал Silgrion - Четверг, 26.05.2011, 16:11
[7] likbezz [26.05.2011, 22:22]
Silgrion,
Можно.
[8] Silgrion [26.05.2011, 23:14]
Quote (likbezz)
Можно.

А вот у меня не получаеться. Пробывал много раз, ничего не выходит. smile
[9] likbezz [27.05.2011, 02:17]
Silgrion,
Quote (Silgrion)
А вот у меня не получаеться. Пробывал много раз, ничего не выходит

Хреново пробовал )))

☑ Пример ...
...

Скрипт:
Code
$(function(){
/* Start DocumentReady */
$('.hideWrap a.hideBtn').each(function(i){var cookie=getCookie('hideBtn'+i);
if (cookie&&cookie.indexOf('show')>-1){$(this).toggleClass('show').parents('.hideWrap').find('.hideCont').show();};
})
/* StartClickFunction */
$('.hideWrap a.hideBtn').click(function(){var cont=$(this).parents('.hideWrap').find('.hideCont');
$(this).toggleClass('show');cont.slideToggle('normal');
var hideBtn=$('.hideWrap a.hideBtn').index($(this)),isShow=$(this).attr('class');
setCookie('hideBtn'+hideBtn,isShow,365);
return false;
});
/* End DocumentReady */
});

- Настройки те же ...
...
[10] Silgrion [10.06.2011, 10:35]
Спасибо! biggrin

Добавлено (10.06.2011, 10:35)
---------------------------------------------
А можно взамен обыной ссылки использовать input - кнопку?

[11] likbezz [10.06.2011, 12:29]
Silgrion,
Quote (Silgrion)
А можно взамен обыной ссылки использовать input - кнопку?

Можно. Класс установить ей соответствующий.
...
[12] Silgrion [10.06.2011, 12:37]
Quote (likbezz)

Можно. Класс установить ей соответствующий.

Пробывал просто класс устанавлить, вот итог <input type="submit" href="javascript://" class="hideBtn" value="Показать" />. Хотя возможно я просто туплю.
[13] likbezz [10.06.2011, 12:49]
Silgrion,
Quote (Silgrion)
<input type="submit" href="javascript://" class="hideBtn" value="Показать" />

С какого это инпут - кнопка стал субмитом?
Code
<div class="hideWrap">
<input class="hideBtn" title="Показать\Скрыть блок" name="" value="Показать" type="button" />
<div class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>

И скрипт возможно придётся поправить, если в нем прописаны ссылки, а не input′ы ...
...

☑ Смотреть исходник ...
...
[14] Silgrion [10.06.2011, 13:16]
Quote (likbezz)
С какого это инпут - кнопка стал субмитом?

И то правда. У меня уже голова кругом идёт. killed
[15] MoVeMix [12.07.2011, 16:01]
likbezz, все отлично, но как сделать, что бы по умолчанию блоки были открыты а не закрыты ка у тебя, что бы куки тоже запоминались?

Сообщение отредактировал MoVeMix - Вторник, 12.07.2011, 16:01
Полная версия сайта