Главная » Статьи » Статьи о/про uCoz » JS и JQ скрипты для uCoz
Плавное сворачивание / разворачивание блока. jQuery

Иногда, так или иначе, возникает необходимость скрыть часть информации со страницы. По разным причинам. Как по визуально-оформительским, так и из-за не особой важности или чисто технической стороне скрываемой информации.
Сделать это можно многими способами.
Давайте рассмотрим некоторые из них и научимся, если для вас это до сих пор «неизвестная» область, делать скрытые области/блоки, раскрывающиеся при клике, и, заодно, посмотрим, как можно их оформить для придания более интуитивно-понятного вида. Вот так «завернул». ヅ

Итак, задача: создать скрытый блок, который бы, при клике на управляющем элементе, плавно открывался, а при повторном - закрывался, сворачивался.

Задача ясна, я думаю, посмотрим на реализацию. Должно получится что-то вроде этого:

Использовать, как и написано в заголовке, будем известную во многих кругах, JavaScript библиотеку jQuery.


Информация:

Если у вас сайт на хостинге юКоз, и вы не совершали никаких действий по отключению скрипта -  jQuery у вас есть, так как подключена «по умолчанию». Это, тот самый, скрипт «u.js» - который включает в себя эту библиотеку.


Если вы подобные (скрытые) блоки, используете не часто или очень редко, проще всего воспользоваться вот таким кодом, хотя это и не очень «правильно».

Набросаю неболшой код, для примера. Классы и прочее - произвольные.

Код HTML. 


Code (HTML)
<!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>hide_block_v0</title>
<link rel="stylesheet" type="text/css" href="http://likbezz.ucoz.ru/_theme/_st/_ext/example_mini.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
/* StartStyle */
.hideWrap{} /* Общий блок */
.hideBtn{} /* Класс для ссылки/кнопки и т.п. */
.hideCont{} /* Класс блока скрытого контента */
/* EndStyle */
</style>
</head>

<body>
<div class="hideWrap">
<a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');return false;">Показать</a>
<div style="display:none;" id="hideCont1" class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>
</body>
</html>

Где:

<script src="http://ajax.googleapis.com/.... - подключаем библиотеку jQuery - только для примера!!!.

<link href="http://likbezz.ucoz.ru/_theme/_st/_ext/example_mini.css".... - основные стили - только для примера!!!

onclick="$('#hideCont1') - действие при клике. Применяем к блоку с ID=hideCont1.

.slideToggle('normal'); - Функция скрывает видимые элементы и показывает скрытые (в данном случае - показывает - «div style="display:none;" id="hideCont1"») используя эффект изменения высоты. Скорость (в скобочках - speed) может быть «slow», «normal», или «fast». Либо задаваться числом в мс.


Пример:


Показать

Наведём немного лоску. И добавим интуитивности открывающей скрытый блок ссылке. ヅ
Используем CSS... Как и обычно... ヅ

Стили CSS

Code (CSS)
<style type="text/css">
/* StartStyle */
.hideWrap{
text-align:left; /* Устанавливаем выравнивание по левому краю */
clear:both;
}
.hideBtn{
display:block; /* Дисплей блок - для ссылки - необходимо, для установки фона */
background:transparent url("/_example/_img/_lib1/_plus.gif") no-repeat left center; /* Картинка «плюс» */
font:bold 11px/15px Verdana,sans-serif;
padding:1px 14px 2px; /* Отступы - для картинки ... и вообще ... */
cursor:pointer;
outline:none; /* Скрываем рамочку, при нажатии */
}
.hideBtn.show{
background-image: url(/_example/_img/_lib1/_minus.gif); /* картинка «минус» - для открытого блока */
}
.hideCont{
display:none; /* Скрываем контент */
}
/* EndStyle */
</style>

Сам код

Code (HTML)
<div class="hideWrap">
<a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');$(this).toggleClass('show');return false;">Показать</a>
<div id="hideCont1" class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>

Пример ... Куда ж без него ....


Показать

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

Функция. Назвал просто ... «function hideShow»

Code (JavaScript)
<script type="text/javascript">
function hideShow(el){
$(el).toggleClass('show').next('div.hideCont').slideToggle('normal');
return false;
};
</script>

Вот такая чистенькая и незамысловатая функция получилсь.
Теперь, чтобы её вызвать, достаточно написать вот так:

Code (HTML)
<div class="hideWrap">
<a class="hideBtn" href="javascript://" onclick="hideShow(this);return false;">Показать</a>
<div class="hideCont">Здесь располагается содержимое  class "hideCont"</div>
</div>

Пояснения, думаю, излишни. Всё и так понятно. Единственное, не забывайте, что .next(); - выбирает только непосредственно следующй далее, сразу же за элементом, элемен. Вот по такому принципу «$("#el + div")».
Если предполагается наличие смежных элементов - используйте «siblings».
Работает по вот такому принципу $("#el ~ div") - выбирает все элементы siblings(называемые "сестринскими", "братскими").

Собираем всё вместе ... и пример(используем вместо .next();  .siblings();):


Code (JavaScript)
function hideShow(el){
$(el).toggleClass('show').siblings('div.hideCont').slideToggle('normal');return false;
};

Показать | Смежные элементы: | Ссылки

Или ещё лучше - обрабатывать все ссылки, в блоке «hideWrap» (после загрузки документа ... ヅ ) и назначать им действие при клике.
Примерно вот так:

Code (JavaScript)
<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
$("div.hideWrap a.hideBtn").click(function(){
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
return false;
});
/* End DocumentReady */
});
</script>

И, тогда, просто писать вот так:

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

А саму функцию поместить в отдельный файл,и подключать к тем страницам, в которых эта функция используется.
Подключать ниже $BODY$ - после контента, в самом низу... Как и рекомендуется со всеми скриптами ...

Как привязать к данному скрипту куки, чтобы у пользователя запоминалась какой блок скрыт (на его усмотрение), а какой нет... и прочие вариации на тему, описаны на форуме - Плавное сворачивание / разворачивание блока + куки (Инструкция и подробное описание привязки куки к объекту).

P.S.

Всем удачи... ヅ
Flesh.

Автор: Likbezz aka Flesh




Источник: Плавное сворачивание/разворачивание блока. Подробная инструкция, мануал.C использованием JavaScript библиотек jQuery.Селекторы,Скрипты
Категория: JS и JQ скрипты для uCoz | Добавил: likbezz (21.08.2010)
Просмотров: 37659 | Комментарии: 22 | Теги: библиотека, Плавное, разворачивание, функции, Селекторы, блока, сворачивание, JavaScript, jQuery
Всего комментариев: 221 2 »
0  
22  e2e4 [Материал]  [14.04.2012]

Идексируется ли контент внутри этого блока?

0  
20  Миша [Материал]  [09.04.2012]

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

0  
21  likbezz [Материал]  [10.04.2012]

Quote (Миша)
скажите, что и где нужно прописать, чтоб окно само закрывалось по истечении определённого промежутка времени?

Заменть скрипт на этот:
Code
<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
$("div.hideWrap a.hideBtn").click(function(){var el=$(this);
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
setTimeout(function(){el.removeClass('show').siblings('div.hideCont').slideUp();},3000);
return false;
});
/* End DocumentReady */
});
</script>

Где:
Code
setTimeout(function(){el.removeClass('show').siblings('div.hideCont').slideUp();},3000);

- Блок будет свёрнут через 3000 мс. В одной секунде 1000 мс, следовательно через 3 секунды.
...

0  
19  jusss [Материал]  [14.02.2012]

У меня начали конфликтовать выпадающая менюшка со скриптом. http://corp-t.ru
Меню видимо на jQuery. Как исправить конфликт?

0  
18  Олег [Материал]  [22.08.2011]

А можно ли этот код подправить как нибудь чтобы плавное раскрытие происходило не вниз а впрово например?

0  
17  likbezz [Материал]  [24.05.2011]

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

Читаем ...
«Плавное сворачивание / разворачивание блока. jQuery + Cookie»
☑ Рабочий пример ...

Описание и разбор на форуме ... в теме «Плавное сворачивание / разворачивание блока + куки»
...

0  
15  Komoff [Материал]  [27.04.2011]

А сложно к этому куки привязать?:) Ну т.е. чтобы при обновлении страницы, открытый блок снова не скрывался.

0  
16  likbezz [Материал]  [29.04.2011]

Да не особо сложно.... Просто лишнее это )

0  
14  blackcat [Материал]  [22.02.2011]

Очень полезная статья - пользуюсь везде (а именно самым последним вариантом, описанным в статье), где нужно аккуратно скрыть дополнительную информацию, но надо признаться js даётся трудно.
Так вот встал вопрос возможно ли с помощью этого скрипта выполнить это:
придать один фон ссылке (слову "Показать") и скрытому содержимому, а картинке плюс/минус другой фон.
Я это реализовывала с помощью другого скрипта без эффекта плавного открытия, создавая таблицу и помещая картинку плюса/минуса в одной ячейке, а "Показать" и скрытое содержимое в другой. Выглядит, примерно, как на картинке:

Вопрос, возможно ли что-то похожее сделать с помощью Вашего скрипта, чтобы скрытое содержимое открывалось плавно.
Заранее благодарю.

Ответ:

Читай ответ ....

0  
13  Integra31 [Материал]  [17.10.2010]

Очень нужная мне статья, только С CSS стилем у меня не работает, просто отображается ссылка и картинка.Почему?

Code
<html>
<body>
<style type="text/css">  
/* StartStyle */
.hideWrap{ text-align:left; /* Устанавливаем выравнивание по левому краю */ clear:both; }
.hideBtn{ display:block; /* Дисплей блок - для ссылки - необходимо, для установки фона */ background:transparent url("down_16.png") no-repeat left center; /* Картинка «плюс» */ font:bold 11px/15px Verdana,sans-serif; padding:1px 14px 2px; /* Отступы - для картинки ... и вообще ... */ cursor:pointer; outline:none; /* Скрываем рамочку, при нажатии */ }
.hideBtn.show{ background-image: url("up-16.png"); /* картинка «минус» - для открытого блока */ }
.hideCont{ display:none; /* Скрываем контент */ }
/* EndStyle */  
</style>
<div class="hideWrap"> <a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');$(this).toggleClass('show');return false;">Показать</a>
<div id="hideCont1" class="hideCont">Здесь располагается содержимое class "hideCont"</div>
</div>
</div>
</body>
</html>

0  
5  Nigelist [Материал]  [09.09.2010]

Почему то при разрешении монитора 1280х1024 сворачивание/разворачивание идет рывками. Если есть решение, черкани плиз на мыло.

0  
6  likbezz [Материал]  [09.09.2010]

Quote (Nigelist)
Почему то при разрешении монитора 1280х1024 сворачивание/разворачивание идет рывками

- Разрешение монитора, я думаю, ни при чём. Основная причина - это содержание блока. Возможно, оно не определено по высоте, и, следовательно, вычисляется на лету. Также, причиной «рывков» может служить скрип в контенте блока, изменяющий содержание/свойства, или фиксированный блок с переполнением, с прокруткой.
Возможным решением является - плюнуть на .slideToggle(), и прописать просто .toggle(). Тоже самое, только без вычисления высоты скрытого контента. Просто плавно открывает/закрывает скрытый блок.
Пример работы можно посмотреть в FAQ - jQuery, элементы

Flesh

0  
7  Nigelist [Материал]  [10.09.2010]

Но ведь при разрешении 1024х768 рывков нет, да и рывки при разрешении 1280х1024 только под Windows, под Linux сворачивание/разворачивание идет очень плавно...

0  
8  likbezz [Материал]  [10.09.2010]

Quote (Nigelist)
под Linux сворачивание/разворачивание идет очень плавно...

- ヅ - Это вообще другая тема. Под Линуксом многое по-другому.
Quote (Nigelist)
Но ведь при разрешении 1024х768 рывков нет

- У меня 1152x864. На примерах выше нет скачков. А вот на форуме, с такими же параметрами - были - переделал на просто «toggle()» - перестало.
- При 800x600 - уверен, тоже не будет - другие масштабы ... ヅ
Плавное сворачивание / разворачивание блока test - посмотри прыгает или нет. У меня, более-менее плавно.
Ссылка на проблему не помешала бы... ヅ
Кстати, в примере без стилей, вообще всё очень плавно. Гораздо глаже, чем с оформлением.
Пример почти без стилей.

0  
9  Nigelist [Материал]  [10.09.2010]

И правда, рывков при использовании «toggle()» практически нету. Но и сворачивание/разворачивание стало анимироваться по другому. Можно ли вернуть старую?

0  
10  Nigelist [Материал]  [10.09.2010]

Выглядит это сейчас так:

0  
11  Nigelist [Материал]  [10.09.2010]

А чего тег видео отключен?

0  
12  Nigelist [Материал]  [10.09.2010]

В общем вот линк на видео

0  
4  Nigelist [Материал]  [03.09.2010]

Спасибо, все получилось...

1-10 11-13
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]