Вы знаете, что такое аккордеон? Правильно – музыкальный инструмент. А еще аккордеоном называют раскрывающуюся / закрывающуюся панель содержащую какой-либо контент. Его удобно применять, когда содержимое должно быть показано в ограниченном пространстве. Например, есть довольно большое меню, разделенное на разделы, а места, чтобы его отобразить сразу – просто хватает. Вот тогда и придет на помощь accordion. Внимание! Эта статья устарела! Новую статью можно почитать здесь.

Посмотрите эти два примера. Пример слева срабатывает по щелчку мышью на панельке-заголовке и имеет довольно интересный эффект «прыгающего мячика», когда панелька падает вниз. Пример справа срабатывает при наведении указателя мыши на панель-заголовок. Тут применен эффект по умолчанию – простое скольжение.

Жалко только, что как всегда в браузере названИЕкоторого Вы знаете без меня, все это выглядит не так прилично как в остальных. Ну, если немного помучаться с CSS, наверняка можно привести все к единообразию).

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

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

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.accordion.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>

Сначала подключаем саму библиотеку, затем файл jquery.dimensions.js (он нам уже знаком – отвечает за работу с размерами элементов). Интересный нам файл ui.accordion.js – именно он обеспечивает работу аккордеона. Файл jquery.easing.js понадобится только в том случае, если Вы решите использовать анимацию, отличную от той, что установлена по умолчанию.

HTML и CSS-код приводить не имеет смысла, поскольку он настолько прост, что пояснений не требует. Посмотреть его Вы всегда сможете в исходном коде примера. Не забывайте только, что тот маленький скрипт, код которого я приведу ниже, обращается к элементам по их идентификаторам.

Итак код:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").accordion({
     animated: "bounceslide"
  });
  $("#example2").accordion({
    event: "mouseover"
  });
});
</script>

И это все! Мы написали оба аккордеона!
Как всегда весь код обернут в $(document).ready(function(){ … }); Для первого аккордеона выбран элемент с id #example, для второго соответственно #example2. В опции animated первого аккордеона мы (пользуясь тем, что подключили файл jquery.easing.js) задали интересный эффект, а в опции event второго аккордеона указали на то, что срабатывать он должен по событию mouseover.

Собственно мы могли поступить еще проще и написать вот так:

$("#example").accordion();

и такой код прекрасно работал бы, потому, что в файле ui.accordion.js задаются опции по умолчанию.
По умолчанию там заданы опции animated: slide и event: click, а также очень интересная опция autoheight: true. В примере, появляющиеся окошки для отображения контента всегда одинаковы и высота определяется по блоку с максимальным содержимым. Если же опцию autoheight установить в false, высота будет разная.

Полный список опций можно отыскать на сайте разработчика. Удачи и юзайте jQuery!

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal