Чат сообщества
|
   |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Скрыть и Открыть блок с запоминанием |
| Скрыть и Открыть блок с запоминанием |
|
Есть у меня замечательный и легкий способ Скрыть или Открыть любой нужный блок...
Стили: Код <style type="text/css"> .hide { visibility:hidden } .show { visibility:visible } </style> Скрипт: Код <script type="text/javascript"> function show_Object1() { document.getElementById('div1').className='show'; } function hide_Object1() { document.getElementById('div1').className='hide'; } </script> Кнопки Скрыть и Открыть: Код <a href="javascript://" onclick="show_Object1()">Открыть</a> <a href="javascript://" onclick="hide_Object1()">Закрыть</a> Блок: Код <div id="div1" class="hide"></div> Но Увы - я не умею работать с куки... Помогите пожалуйста реализовать запоминание действия! На моём сайте очень нужно, чтобы блок оставался открытым, если был открыт, и оставался закрытым, если был закрыт. Заранее благодарю! |
|
|
|
fomir, привет) быстренько накидал скриптик, может в будущем и пригодится. Идея та же самая что и у тебя, только немного усовершенствовал. Поехали:
Суть в том, чтоб к кнопке добавить один из атрибутов data-hide, data-show или data-toggle, значением которых будет класс или идентификатор (.class или #id) элемента на странице который нужно скрыть(data-hide), показать(data-show) или изменить его свойство в зависимости от текущего(data-toggle). При этом можно указывать несколько значений через запятую, например data-hide=".class1, .class2, #idBlock" и все объекты имеющие class="class1", class="class2", id="idBlock" - будут скрыты. Помимо классов и идентификаторов можно указывать селекторы тегов(например data-hide="div" скроет все теги <div></div>), мультиклассы, универсальные, контекстные соседние, дочерние селекторы и селекторы атрибутов. В общем всё как в CSS. Ну и собственно сам скрипт. Написан с помощью jQuery: Код <script> $('[data-hide]').click(function(){ var elem = $(this).attr('data-hide'); $(elem).hide(); return false }); $('[data-show]').click(function(){ var elem = $(this).attr('data-show'); $(elem).show(); return false }); $('[data-toggle]').click(function(){ var elem = $(this).attr('data-toggle'); if ($(elem).css('display') == 'none') {$(elem).show()} else {$(elem).hide()} return false }); </script> P.S: Оговорюсь, мои познания в JS весьма посредственны, но я над собой работаю. Позже возьмусь за эту идею и разовью ее чуть больше, в том числе и с запоминанием текущего положения свойств элементов. Можешь забрать этот код и вставить его себе, сам знаешь куда.
Сообщение отредактировал Head-Mad - Четверг, 25 Июл 2013, 15:25:03
|
|
Цитата (Head-Mad) Идея та же самая что и у тебя, только немного усовершенствовал. Иными словами: Если у div1 - z-index: 1, а у div2 - z-index: 2, то работать будет только div2, т.к. даже если он скрыт - слой div2 - z-index: 2 остается на своём уровне и перекрывает div1, делая его недоступным к манипуляциям пользователя, разве что... если кнопки управления расположить где-то в совсем другом месте) |
|
Цитата (Head-Mad) Будет скрываться указанный элемент, и все вложенные в него, независимо от z-index и других параметров Если я всё правильно понял, то установка скрипта: Перед </body> Код <script> $('[data-hide]').click(function(){ var elem = $(this).attr('data-hide'); $(elem).hide(); return false };); $('[data-show]').click(function(){ var elem = $(this).attr('data-show'); $(elem).show(); return false };); $('[data-toggle]').click(function(){ var elem = $(this).attr('data-toggle'); if ($(elem).css('display') == 'none') {$(elem).show()} else {$(elem).hide()} return false };); </script> Кнопка открыть Код <a href="#" data-show="div1">Открыть</a> Кнопка закрыть Код <a href="#" data-hide="div1">Закрыть</a> Блок для манипуляций Код <div id="div1"></div> или <div class="div1"></div> Остается придумать как запоминать выбор) Сообщение отредактировал fomir - Пятница, 26 Июл 2013, 13:35:05
|
|
fomir, не совсем так, в data-show, data-hide и data-toggle, значения нужно указывать вместе с селекторами.
В твоем варианте так: Код <a href="#" data-show="#div1">Открыть</a> <a href="#" data-hide=".div1">Скрыть</a> Кстати, совсем не обязательно для этих целей использовать тег <a></a>, атрибуты можно добавить и к любому другому элементу. Например Код <span data-hide="#div1, .div1">Скрываем оба блока</span> Скроет оба блока, значения необходимо писать через запятую. Пробелы ставить не обязательно. Можешь забрать этот код и вставить его себе, сам знаешь куда.
Сообщение отредактировал Head-Mad - Пятница, 26 Июл 2013, 17:40:45
|
|
Люди добрые, подскажите, у меня имеется схожий скрипт
Код <div class="right"> <a id="hide-but" style="position:absolute;display:block;" class="hide-block" href="javascript://" onclick="$('#r-colonka, #hide-but').fadeOut('slow'); $('#show-but').fadeIn('slow');"></a> <a id="show-but" class="show-block" style="display:none; position:absolute;" href="javascript://" onclick="$('#r-colonka, #hide-but').fadeIn('slow'); $('#show-but').fadeOut('slow');"></a> </div> и есть вопрос. При открытии страницы блок по умолчанию открыт, а по клику кнопки сворачивается. Как сделать чтоб блок был закрыт, а по клику раскрывался? Сообщение отредактировал SergeyZhuk - Вторник, 30 Июл 2013, 23:17:13
|
| |||
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!