Выезжающий блок на jQuery

Как и обещал, выкладываю реализацию выезжающего блока (slide), сделанного с помощью библиотеки jQuery. Но для начала – пара слов о самой библиотеке.

Что такое jQuery?

jQuery – это фреймворк, специализирующийся на взаимодействии HTML и JavaScript. jQuery помогает легко получать доступ к любому элементу (набору элементов) объектной модели документа (DOM), обращаться к атрибутам и содержимому элементов DOM и, конечно, манипулировать ими.

Как работает jQuery?

После подключения библиотеки к вашей страницы, jQuery позволяет обращаться к к DOM объектам и их элементам.
Существует два вида вызова методов jQuery:

через функции $, являющиеся методами объекта jQuery. Их можно объединять в цепочку, поскольку каждая из них возвращает этот объект;

через функции $., не связанные с объектом jQuery.

Например:

$(”#header”) – получение элемента с id=”header”

$(”h1″) – получить все элементы <h1>

$(”div#post .data”) – получить все элементы с классом =”data” которые находятся в элементе div с id=”post”

$(”ul li:first”) – получить только первый элемент<li> из списка <ul>

Теперь, когда базовые навыки получены, можно перейти к реализации выезжающего блока.

Реализация

Сначала нужно скачать фреймфорк. Сделать это можно с официального сайта проекта. Или скачать с моего блога, уже сжатый в gzip готовый дистрибутив (размер около 50 кБ). Подключаем библиотеку:

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

Теперь сам блок:

<input type="button" class="button" value="Показать все что скрыто!" />
<div id="div_id"  style='display:none;'>Тут скрытая информация</div>

И, наконец, очередь кода jQuery. Общая логика такова: по клику на кнопку, ее класс будет меняться с active на button и обратно, а блок с id = div_id будет выезжать/задвигаться. Сам код:

<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
$("#div_id").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>

Строчка $(document).ready(function() говорит о том, что функция будет выполнена, когда будет готов DOM. Далее, навешиваем событие на нажатие на кнопку. И для элемента div_id (наш блок) используем функцию slideToggle, которая в jQuery и отвечает за “выезд”. В качестве аргумента передаем ей скорость ( в нашем случае это slow, можете попробовать написать fast в качестве эксперимента. И, наконец, присваиваем кнопки класс active. Вот и все. Минимум кода, зато какой эффект. Примером может служить кнопка “Комментарии для пользователей li.ru” внизу страницы.
Я и дальше планирую написание статей про jQuery, по мере изучения его мною. Оставайтесь на линии. смайлик.