советы по CSS, HTML, Java Script, PHP

блог о веб технологиях

свернуть развернуть

Май18

свернуть развернутьКак и обещал в прошлой статье – буду рассказывать про jquery. Сегодня расскажу про эффект сворачивания, разворачивания на jquery. Хорошим примером может быть социалка Вконтакте – в которой можно сворачивать и разворачивать разные боксы, на картинке выше показан развернутый блок “Друзья он-лайн” и справа от него другие свернутые блоки. Для тех кому все равно тяжело могу провести параллель со сворачиванием и разворачиванием рулона обоев, ткани или туалетной бумаги – кому как понятней.

Немного теории

Элемент будет скрыт либо отображен путем изменения только своей высоты.

slideUp(speed,[fn]) – свернет объект за время speed, и после этого вызовет функцию [fn] один раз.

slideDown(speed,[fn]) – развернет объект за время speed, и после этого вызовет функцию [fn] один раз.

slideToggle(speed,[fn]) – свернет или развернет (в зависимости от текущего состояния) объект за время speed, и после этого вызовет функцию [fn] один раз.

speed – может принимать либо строковый параметр: slow, normal, fast, либо значение в миллисекундах

[fn] – не обязательный параметр, можно указывать, а можно и не указывать :)

Практический пример

Создаем три кнопки: свернуть, развернуть, свернуть или развернуть.

<input onclick="$('div.container').slideUp('slow');" type="button" value="Свернуть" />
<input onclick="$('div.container').slideDown('slow');" type="button" value="Развернуть" />
<input onclick="$('div.container').slideToggle('slow');" type="button" value="Свернуть или Развернуть" />
<div class="container">
Конечно же у качественной книги должна быть соответствующая обложка.
 
Как и сами книги обложки могут быть различными. Для дорогой сувенирной книги подойдет выделанная тисненая кожа, для свадебной книги светлые пастельные тона, детские книжки будут интересно смотреться в ярких обложках. Кроме того, обложку возможно украсить некоторыми декоративными элементами,  например, фотографией напечатанной на холсте или алюминиевой вставке.</div>

Просмотреть пример  свернуть развернуть или скачать исходник.

размещено в Java Script
4 Комментариев для

“свернуть развернуть”

  1. On Май 31st, 2010 at 13:10 S3R написал:

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

  2. On Июнь 1st, 2010 at 11:40 admin написал:

    и Вам здравствуйте, можно сделать чтобы сворачивалось и разворачивалось вправо и влево, но только при помощи другой функции, если интересно, то могу в ближайшей статье описать этот метод

  3. On Июнь 2nd, 2010 at 03:58 S3R написал:

    admin, да было бы очень интересно

  4. On Июнь 8th, 2010 at 17:49 admin написал:

    ну вот, как и обещал, в примере к статье описал, как сделать так, чтобы объект сворачивался и разворачивался влево и вправо jquery анимация

Вы должны авторизироваться чтобы оставить комментарий.