создаем сайт самостоятельно

• Главная
• Первые шаги
• Уроки HTML
• Уроки CSS
• Уроки PHP
• Уроки JavaScript
• Уроки jQuery
• Уроки SQL и БД
• Уроки Joomla
• Уроки Photoshop
• Как заработать
• Как раскрутить
• Хостинг сайтов





jQuery - Виджет Accordion - раскрывающиеся панели

Виджет - это специальным образом оформленный модуль вывода информации.

Виджет jQuery UI - Accordion помогает отображать или скрывать информацию, расположенную в нескольких панелях. Именно поэтому, этот виджет часто используют для организации меню на сайте (хотя с точки зрения оптимизации сайта это не очень хорошо). А вот использовать этот виджет для других целей порой очень удобно. Например, для организации вот такого справочника (пощелкайте по панелям): Обратите внимание, одновременно панели не открываются. Мы видим содержимое только той панели, по которой щелкнули, остальные сворачиваются.

Для реализации такого справочника, необходимо учитывать требования, выдвигаемые виджетом к html-разметке. Дело в том, что виджет считает панелью то, что содержится в тегах <a></a>, а содержимым панели - все, что находится в тегах <div></div> после ссылки. Иными словами структура html-разметки должна быть следующей: Сами ссылки в панелях можно обрамлять другими тегами. Так, для нашего примера, html-код будет следующим:

Оформим стили на странице style.css: А на странице script.js укажем: Все, наш пример работает. Справочник можно немного доработать, используя параметры виджета Accordion:

• active - определяет, какая панель при инициализации будет открыта, по умолчанию - первая.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ active: 2 }); });
  Теперь при инициализации будет раскрыта вторая панель.



• animated - здесь можно отключить анимацию, установленную по умолчанию (slide).
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ animated: false }); });



• autoHeight - устанавливает высоту содержимого панели. По умолчанию высоты у всех панелей одинаковы и равны высоте панели с максимальным содержимым. Значение false этого параметра сделает высоты всех панелей разными, по их содержимому.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ autoHeight: false }); });



• clearStyle - полезно для работы с динамическим содержанием, т.к. очищает css-свойства height и overflow каждый раз после окончания анимации. По умолчанию этот параметр выключен (false). Кстати, вместе с опцией autoHeight этот параметр не работает.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ clearStyle: true }); });



• collapsible - определяет, могут ли все панели закрываться одновременно, а так же позволяет свёртывать активную панель с помощью щелчка по ней.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ collapsible: true }); });



• event - определяет событие, по которому будет происходить свертывание и развертывание панелей. По умолчанию это щелчок (click), но можно выбрать и другое.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ event: 'mouseover' }); });



• fillSpace - определяет высоту открытой секции (игнорируя параметр autoheight). По умолчанию - false. При установке значения true открытая панель будет занимать всю высоту, определяемую родительским элементом.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ fillSpace: true }); });



• header - определяет заголовок панели. По умолчанию это содержимое тегов <a></a>, но по желанию можно определить его и явно.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ header: 'p' }); });



• navigation - при перезагрузке страницы позволяет сохранить состояние. Для этого разыскивает и активирует ссылку (по умолчанию используется значение false).
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ navigation: true }); });



• navigationFilter - здесь можно определить функцию, которая будет обрабатывать ссылку, по которой осуществляется переход. Используется совместно с опцией navigation для построения меню.
  
  Пример:
  $(function(){ $("#les15_accordion").accordion({ navigationFilter: function(){ ... } }); });

Следующие два параметра связаны с событиями:

• changestart - событие наступает с началом смены панелей.


• change - событие наступает каждый раз при смене активной панели (по завершению анимации).

При использовании этих параметров мы можем определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о заголовках и содержании панелей).

Свойства этих аргументов:
- ui.newHeader - заголовок активной панели,
- ui.oldHeader - заголовок предыдущей панели,
- ui.newContent - содержимое активной панели,
- ui.oldContent - содержание предыдущей панели.

Давайте настроим наш справочник, используя некоторые параметры, например, вот так: Теперь один щелчок открывает панель, повторный щелчок закрывает ее. Высота панели определяется по ее содержимому, что выглядит гораздо лучше.

Так же, как и у плагинов jQuery UI, у виджета accordion есть методы, которые позволяют менять его работу после инициализации: destroy, disable, enable, option и activate. С первыми четырьмя мы уже знакомы (по уроку 10), метод activate позволяет программно активировать необходимые секции.

Пример:






Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.

admin@site-do.ru
site-do.ru © 2009-2019 Копировать материалы сайта запрещено!
За нарушение авторских прав предусмотрена уголовная ответственность!
Телефон редакции +7(499)346-89-56
127051, г.Москва, Цветной бульвар, д. 11, стр. 6, офис 405.