Плавное сворачивание / разворачивание блока + куки
2011-05-24 Дата: Вторник, 24.05.2011, 13:53 | Сообщение # 1
Рядовой
Группа: Проверенные
Статус: Offline
Как привязать к этому скрипту куки, чтобы у пользователя запоминалась какой блок скрыт (По его усмотрению), а какой нет? Целый день пытался сам сделать, не получилось. Помогите, пожалуйста!
2011-05-24 Дата: Вторник, 24.05.2011, 19:26 | Сообщение # 2
Аццкий кодер
Группа: Администраторы
Статус: Unknown
Silgrion , Quote (Silgrion )
Как привязать к этому скрипту куки
А этот скрипт что отображает,скрывает? Одни и те же элементы на всех страницах или разные? ... Это существенно ...
2011-05-24 Дата: Вторник, 24.05.2011, 20:49 | Сообщение # 3
Аццкий кодер
Группа: Администраторы
Статус: 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 - сжатый. ... Весь код:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Плавное сворачивание / разворачивание блока. jQuery + Cookie</title> <link rel="stylesheet" type="text/css" href="/_theme/_st/_ext/example.css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <script type="text/javascript" src="/_theme/_script/_ext/_cookie.js"></script> <style type="text/css"> .hideWrap{text-align:left;clear:both;} .hideBtn{display:block;background:transparent url('http://likbezz.ru/_example/_img/_lib1/_plus.gif') no-repeat left center;font:bold 11px/15px Verdana,sans-serif;cursor:pointer;outline:none;padding:1px 14px 2px;} .hideBtn.show{background-image:url('http://likbezz.ru/_example/_img/_lib1/_minus.gif');} .hideCont{display:none;} </style> <script type="text/javascript"> $(function(){ /* Start DocumentReady */ $('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();}) /* StartClickFunction */ $('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; }); /* End DocumentReady */ }); </script> </head> <body> <div id="exContent" style="text-align:left;padding-top:50px;"> <div class="hideWrap"> <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont">Здесь располагается содержимое class "hideCont"</div> </div> <br /> <br /> <div class="hideWrap"> <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont">Здесь располагается содержимое class "hideCont"</div> </div> <br /> <br /> <div class="hideWrap"> <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont">Здесь располагается содержимое class "hideCont"</div> </div> </div> </body> </html>
☑ Пример ... Плавное сворачивание / разворачивание блока. 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. Изначально открытые блоки ... (рабочий, не забываем чистить куки) .... ...
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Плавное сворачивание / разворачивание блока. jQuery + Cookie. Блоки изначально открыты.</title> <link rel="stylesheet" type="text/css" href="http://likbezz.ru/_theme/_st/_ext/example.css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <script type="text/javascript" src="http://likbezz.ru/_theme/_script/_ext/_cookie.js"></script> <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');} /*.hideCont{display:none;}*/ </style> <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> </head> <body> <div id="exContent" style="text-align:left;padding-top:50px;"> <div class="hideWrap"> <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont">Здесь располагается содержимое class "hideCont"</div> </div> <br /><br /> <div class="hideWrap"> <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont">Здесь располагается содержимое class "hideCont"</div> </div> <br /><br /> <div class="hideWrap"> <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont">Здесь располагается содержимое class "hideCont"</div> </div> </div> </body> </html>
....
2011-05-24 Дата: Вторник, 24.05.2011, 20:50 | Сообщение # 4
Рядовой
Группа: Проверенные
Статус: Offline
Quote (likbezz )
Одни и те же элементы на всех страницах или разные?
Эти блоки расположены только на главной странице и больше нигде.
2011-05-24 Дата: Вторник, 24.05.2011, 20:52 | Сообщение # 5
Аццкий кодер
Группа: Администраторы
Статус: Unknown
Silgrion , Quote (Silgrion )
Эти блоки расположены только на главной странице и больше нигде.
В таком случае - всё будет работать )))
2011-05-26 Дата: Четверг, 26.05.2011, 15:57 | Сообщение # 6
Рядовой
Группа: Проверенные
Статус: 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
2011-05-26 Дата: Четверг, 26.05.2011, 22:22 | Сообщение # 7
Аццкий кодер
Группа: Администраторы
Статус: Unknown
Silgrion , Можно.
2011-05-26 Дата: Четверг, 26.05.2011, 23:14 | Сообщение # 8
Рядовой
Группа: Проверенные
Статус: Offline
А вот у меня не получаеться. Пробывал много раз, ничего не выходит.
2011-05-27 Дата: Пятница, 27.05.2011, 02:17 | Сообщение # 9
Аццкий кодер
Группа: Администраторы
Статус: 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 */ });
- Настройки те же ... ...
2011-06-10 Дата: Пятница, 10.06.2011, 10:35 | Сообщение # 10
Рядовой
Группа: Проверенные
Статус: Offline
Спасибо! Добавлено (10.06.2011, 10:35) --------------------------------------------- А можно взамен обыной ссылки использовать input - кнопку?
2011-06-10 Дата: Пятница, 10.06.2011, 12:29 | Сообщение # 11
Аццкий кодер
Группа: Администраторы
Статус: Unknown
Silgrion , Quote (Silgrion )
А можно взамен обыной ссылки использовать input - кнопку?
Можно. Класс установить ей соответствующий. ...
2011-06-10 Дата: Пятница, 10.06.2011, 12:37 | Сообщение # 12
Рядовой
Группа: Проверенные
Статус: Offline
Quote (likbezz )
Можно. Класс установить ей соответствующий.
Пробывал просто класс устанавлить, вот итог <input type="submit" href="javascript://" class="hideBtn" value="Показать" />. Хотя возможно я просто туплю.
2011-06-10 Дата: Пятница, 10.06.2011, 12:49 | Сообщение # 13
Аццкий кодер
Группа: Администраторы
Статус: 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′ы ... ... ☑ Смотреть исходник ... ...
2011-06-10 Дата: Пятница, 10.06.2011, 13:16 | Сообщение # 14
Рядовой
Группа: Проверенные
Статус: Offline
Quote (likbezz )
С какого это инпут - кнопка стал субмитом?
И то правда. У меня уже голова кругом идёт.
2011-07-12 Дата: Вторник, 12.07.2011, 16:01 | Сообщение # 15
Рядовой
Группа: Пользователи
Статус: Offline
likbezz , все отлично, но как сделать, что бы по умолчанию блоки были открыты а не закрыты ка у тебя, что бы куки тоже запоминались?
Сообщение отредактировал MoVeMix - Вторник, 12.07.2011, 16:01