Фильтр по:
  

  • Страница 1 из 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Плавное сворачивание / разворачивание блока + куки (Инструкция и подробное описание привязки куки к объекту)
Плавное сворачивание / разворачивание блока + куки
Дата: Вторник, 24.05.2011, 13:53 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


Как привязать к этому скрипту куки, чтобы у пользователя запоминалась какой блок скрыт (По его усмотрению), а какой нет? Целый день пытался сам сделать, не получилось. Помогите, пожалуйста!

 
Дата: Вторник, 24.05.2011, 19:26 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Silgrion,
Quote (Silgrion)
Как привязать к этому скрипту куки

А этот скрипт что отображает,скрывает?
Одни и те же элементы на всех страницах или разные?
... Это существенно ...


 
Дата: Вторник, 24.05.2011, 20:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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)

 
Дата: Вторник, 24.05.2011, 20:50 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
Одни и те же элементы на всех страницах или разные?

Эти блоки расположены только на главной странице и больше нигде.


 
Дата: Вторник, 24.05.2011, 20:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Silgrion,
Quote (Silgrion)
Эти блоки расположены только на главной странице и больше нигде.

В таком случае - всё будет работать )))


 
Дата: Четверг, 26.05.2011, 15:57 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


А можно как-то вместо 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
 
Дата: Четверг, 26.05.2011, 22:22 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Silgrion,
Можно.


 
Дата: Четверг, 26.05.2011, 23:14 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
Можно.

А вот у меня не получаеться. Пробывал много раз, ничего не выходит. smile


 
Дата: Пятница, 27.05.2011, 02:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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.06.2011, 10:35 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


Спасибо! biggrin

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

 
Дата: Пятница, 10.06.2011, 12:29 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Silgrion,
Quote (Silgrion)
А можно взамен обыной ссылки использовать input - кнопку?

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


 
Дата: Пятница, 10.06.2011, 12:37 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)

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

Пробывал просто класс устанавлить, вот итог <input type="submit" href="javascript://" class="hideBtn" value="Показать" />. Хотя возможно я просто туплю.


 
Дата: Пятница, 10.06.2011, 12:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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′ы ...
...

Смотреть исходник ...
...


 
Дата: Пятница, 10.06.2011, 13:16 |
Рядовой
Группа: Проверенные
Сообщений: 13
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
С какого это инпут - кнопка стал субмитом?

И то правда. У меня уже голова кругом идёт. killed


 
Дата: Вторник, 12.07.2011, 16:01 |
MoVeMix
Рядовой
Группа: Пользователи
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


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

Сообщение отредактировал MoVeMix - Вторник, 12.07.2011, 16:01
 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Плавное сворачивание / разворачивание блока + куки (Инструкция и подробное описание привязки куки к объекту)
  • Страница 1 из 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Поиск:


Мобильная версия