Немного познакомившись с теорией jQuery, продвинемся на более высокую ступеньку – перейдем к применении наших знаний на практике.
Как решить проблему помещения значительного количества контента на небольшой площади? Одним из способов выполнения такой задачи является так называемая «Гармошка». Она позволяет показать несколько заголовков, каждый из которых содержит параграфы.
Если бы они были отображены все вместе, то для того, чтобы найти определенное место, нужно было бы пролистывать мышкой много текста. А, использование «гармошки», позволяет нам видеть полностью всего один параграф, а остальной текст – в виде заголовков. Нажимая на заголовки, мы открываем необходимый текст.
Итак, написание примера, затем – его анимация. Так мы познакомимся с множеством функций jQuery, значительно облегчающих нашу жизнь.
Обозначаем объект – тот текст, который нужно сжать:
[sourcecode language=’xml’]Item 1
Item 1 content
Item 2
Item 2 content
Item 3
Item 3 content
Item 4
Item 4 content
[/sourcecode]Теперь немного CSS:
[sourcecode language=’css’]p,h3 {margin: 0; padding: 0;}p {height: 150px; width: 200px; border: 1px solid black;}
h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}[/sourcecode]
Дальше дело за JavaScript. Подключаем jQuery из google CDN, добавляем собственные script-теги внизу страницы, и начинаем:
[sourcecode language=’jscript’]var headings = $(‘h3′);[/sourcecode]Теперь нужно приобщить заголовки к движению. Сначала добавим событие click (клик мышкой):
[sourcecode language=’jscript’]headings.click(function() {});[/sourcecode]
Прописываем код движения внутри
[sourcecode language=’jscript’]var cur = $(this); //сохраняем элемент, на который мы нажали (this) для более простой передачиcur.siblings(‘p’).hide(); //все параграфы (помним функцию siblings) скроем (hide)
cur.next(‘p’).show(); //показывает следующий параграф, который идет после активного заголовка.[/sourcecode]
И разбиваем построчно
[sourcecode language=’jscript’]var cur = $(this);[/sourcecode]Для обозначения элемента, с которым в данный момент происходит взаимодействие, используют this. Обращаясь к нему, осуществляем запись в качестве переменной cur.
В нашем примере нажимаем на заголовок heading.
[sourcecode language=’jscript’]cur.siblings(‘p’).hide();[/sourcecode]Функция siblings адресована ко всем элементам, которые находятся на том же уровне, что и текущий. Теперь уточняем и скрываем с помощью функции hide те параграфы, которые находятся на том же уровне, что и заголовок.
[sourcecode language=’jscript’]cur.next(‘p’).show();[/sourcecode]Функция next переводит к элементу, следующему за перепенной cur, то есть к параграфу, следующему после cur. Функция show позволяет его показать.
Следующие необходимые нам функции – slideUp() и slideDown(). С их помощью движение можно сделать скользящим.
С помощью click-функции пишем:
[sourcecode language=’jscript’]headings.click(function() {var cur = $(this); //сохраняем элемент, на который мы нажали (this) для упрощенной передачи
cur.siblings(‘p’).hide(); //все параграфы (помним функцию siblings) скроем (hide)
cur.next(‘p’).show(); //показывает следующий параграф, который идет после активного заголовка.
})[/sourcecode]
Скрытие и открытие параграфа делаем более плавным: заменяем show() на slideDown() и hide() на slideUp():
[sourcecode language=’jscript’]headings.click(function() {var cur = $(this); //сохраняем элемент, на который мы нажали (this) для упрощенной передачи
cur.siblings(‘p’).slideUp() //все параграфы (помним функцию siblings) скроем (hide)
cur.next(‘p’).slideDown(); //показывает следующий параграф, который идет после активного заголовка.
})[/sourcecode]
Правда, совсем не сложно?
