Аккордеон

Материал из JQuery

Перейти к: навигация, поиск

Accordion


Описание
Свойства
Методы
События
Оформление

Плагин Accordion позволяет превратить выбранные элементы страницы в виджеты, которые обычно называют аккордеонами. Допустим, вам необходимо превратить в такой виджет элемент с идентификатором accordion для этого необходимо, чтобы внутри он имел следующую структуру:

Если вы хотите использовать в качестве заголовков другие элементы (к примеру, ссылки с классом header (т.е. без h3)), то лучше указать для этого соответствующие селекторы в свойстве header (для ссылок с классом header - "a.header").

Чтобы открыть нужную (с нужным номером) вкладку программно, используйте метод .accordion( "activate" , index ).

Нужная вкладка может быть открыта по принципу якоря (он работает только при включенном свойстве navigation): если вам необходимо сделать ссылку на страницу с аккордеоном, чтобы при этом оказалась открыта нужная вкладка (допустим вторая), необходимо, чтобы элемент a лежащий внутри заголовка этой вкладки, имел уникальный параметр href (допустим "#panel2". Решетка в начале обязательна). В таком случае, ссылка на страницу с нужной открытой вкладкой будет такой httр//site.ru#panel2.

Замечание: если вы хотите чтобы в вашем аккордеоне могли быть открыты сразу несколько вкладок одновременно, то не следует использовать плагин Accordion, лучше найти специально предназначенный для этого плагин или организовать его самостоятельно.


↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет работу плагина Accordion.
// ------- Работа со свойством disabled---------
// в момент установки accordion на элемент
$("selector").accordion({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").accordion( "option", "disabled" );
//изменение значения disabled
$("selector").accordion( "option", "disabled", true );
Это свойство отвечает за то, какая вкладка окажется открыта. Если указать в нем false, то все вкладки будут закрыты.
// ------- Работа со свойством active ---------
// в момент установки accordion на элемент
$("selector").accordion({ active:false });
 
//получение значения active
var active = $(".selector").accordion( "option", "active" );
//изменение значения addClasses
$("selector").accordion( "option", "active", false );
animated:string,false('slide')
Этот параметр определяет тип анимации (см. описание параметра easing). Задав false, вы отключите анимационную смену вкладок аккордеона.
// ------- Работа со свойством animated ---------
// в момент установки accordion на элемент
$("selector").accordion({ animated:"bounceslide" });
 
//получение значения animated
var animated = $("selector").accordion( "option", "animated" );
//изменение значения animated
$("selector").accordion( "option", "animated", "bounceslide" );

Тип "bounceslide" доступен только при подключенном UI Effects Core.

autoHeight:boolean(true)
Если это свойство включено, то все вкладки будут иметь одинаковую высоту (такую, чтобы содержимое любой из вкладок могло бы туда вместиться).
// ------- Работа со свойством autoHeight ---------
// в момент установки accordion на элемент
$("selector").draggable({ axis: "x" });
 
//получение значения autoHeight
var autoHeight = $("selector").accordion( "option", "autoHeight" );
//изменение значения autoHeight
$("selector").accordion( "option", "autoHeight", "y" );
clearStyle:boolean(false)
Если это свойство включено, то после каждого переключения вкладок будет пересчитана требуемая высота аккордеона. Это может быть удобно, если высота содержимого вкладок может изменяться. Использовать clearStyle имеет смысл только при включенном autoHeight.

Надо сказать, что это свойство ведет себя довольно сомнительно. Такое ощущение, что если оно включено, то после первого переключения вкладки, свойство autoHeight переходит из состояния true в false, и все. То есть, после переключения вкладки, высота каждого из блоков становится самостоятельной, а не общей.

// ------- Работа со свойством clearStyle ---------
// в момент установки accordion на элемент
$("selector").accordion({ clearStyle: "button" });
 
//получение значения clearStyle
var clearStyle = $("selector").accordion( "option", "clearStyle" );
//изменение значения clearStyle
$("selector").accordion( "option", "clearStyle", "button" );
collapsible:boolean(false)
По умолчанию, пользователь не может закрывать вкладки, а только переключать. Однако если свойство collapsible установлено в true, то нажатие на заголовок открытой вкладки приведет к ее закрытию (если вкладки переключаются при наведении курсора на заголовок, то и закрытие будет происходить при наведении, а не при нажатии).
// ------- Работа со свойством collapsible ---------
// в момент установки accordion на элемент
$("selector").accordion({ collapsible:true });
 
//получение значения collapsible
var collapsible = $("selector").accordion( "option", "collapsible" );
//изменение значения collapsible
$("selector").accordion( "option", "collapsible", true );
event:string('click')
Тип(ы) событий, при возникновение которых будет происходить переключение между вкладками. Напомним, что можно задать несколько типов через пробел. К этому свойству применимо одно нестандартное событие - "hoverintent", которое срабатывает если курсор задерживается на элементе более секунды (это событие доступно только при подключенном jquery UI).
// ------- Работа со свойством event ---------
// в момент установки accordion на элемент
$("selector").accordion({ event:"hoverintent" });
 
//получение значения event
var event = $("selector").accordion( "option", "event" );
//изменение значения event
$("selector").accordion( "option", "event", "hoverintent" );
fillSpace:boolean(false)
Аккордеон занимает все возможное горизонтальное пространство внутри своего родителя. Если необходимо, чтобы он занимал также и все свободное пространство по вертикали, необходимо установить свойство fillSpace в true. Однако, это не означает, что если родитель изменит свою высоту, то аккордеон изменит свою вслед за ним. Такое поведение необходимо организовывать самостоятельно.
// ------- Работа со свойством fillSpace ---------
// в момент установки accordion на элемент
$("selector").accordion({ fillSpace:true });
 
//получение значения fillSpace
var fillSpace = $("selector").accordion( "option", "fillSpace" );
//изменение значения fillSpace
$("selector").accordion( "option", "fillSpace", true );
header:селектор,jQuery('> li > :first-child, > :not(li):even')
С помощью этого свойства можно задать элементы, которые будут использоваться в качестве заголовков.
// ------- Работа со свойством header ---------
// в момент установки accordion на элемент
$("selector").accordion({ header:'h3' });
 
//получение значения header
var header = $("selector").accordion( "option", "header" );
//изменение значения cursorAt
$("selector").accordion( "option", "header", 'h3' );
icons:object({'header':'ui-icon-triangle-1-e', 'headerSelected':'ui-icon-triangle-1-s'})
В этом свойстве можно задать классы, с помощью которых будет оформлены зоны иконок в заголовках. Можно организовать для этого свои классы, а можно использовать классы с иконками, предоставляемые jQuery UI (см. последний пример выше).
// ------- Работа со свойством icons ---------
// в момент установки accordion на элемент
$("selector").accordion({ icons:{'header':'ui-icon-plus', 'headerSelected':'ui-icon-minus'} });
 
//получение значения icons
var icons = $("selector").accordion( "option", "icons" );
//изменение значения icons
$("selector").accordion( "option", "icons", {'header':'ui-icon-plus', 'headerSelected':'ui-icon-minus'} );
navigation:boolean(false)
Если этот параметр включен, то вкладки аккордеона можно будет открывать по принципу якорей (см. раздел описание). Если вы хотите самостоятельно обрабатывать ситуацию и принимать решение, о том, какая вкладка должна быть открыта, используйте параметр navigationFilter.
// ------- Работа со свойством navigation ---------
// в момент установки accordion на элемент
$(".selector").accordion({ navigation:15 });
 
//получение значения navigation
var navigation = $(".selector").accordion( "option", "navigation" );
//изменение значения navigation
$(".selector").accordion( "option", "navigation", 15 );
navigationFilter:функция(-)
С помощью этого свойства можно задать функцию, которая будет вызвана при открытии страницы, для каждой вкладки аккордеона отдельно, чтобы определить, какая из них должна оказаться открытой. Если функция возвратит true, то проверяемая вкладка будет открыта. В функция будет получать два параметра: первый - номер проверяемой вкладки (начиная с нуля), второй - содержимое адресной строки.
// ------- Работа со свойством navigationFilter ---------
// в момент установки accordion на элемент
$("selector").accordion({ navigationFilter:function(n, s){...} });
 
//получение значения navigationFilter
var navigationFilter = $("selector").accordion( "option", "navigationFilter" );
//изменение значения navigationFilter
$("selector").accordion( "option", "navigationFilter", function(n, s){...} );

↓ Способ вызова
.accordion("destroy") 
Удаляет всю функциональность плагина accordion с выбранных элементов.
.accordion("disable") 
Останавливает работу плагина accordion на выбранных элементах. Для возобновления, необходимо воспользоваться методом .accordion("enable").
.accordion("enable") 
Возобновляет работу плагина accordion на выбранных элементах (например, после того, как она была остановлена с помощью .accordion("disable")).
.accordion("option", optionName, [value]) 
Этот метод позволяет изменять/получать свойства плагина accordion. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .accordion("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.accordion("widget") 
Возвращает те из выбранных элементов, к которым был применен плагин accordion (поиск осуществляется по классу ui-accordion, который автоматически присваивается этим элементам).
.accordion("activate", index) 
Вызов этого метода откроет вкладку лежащую в аккордеоне на позиции index (нумеровка с нуля). Если указать вместо индекса false, то будут закрыты все вкладки (возможно лишь в случае, если свойство collapsible равно true).
.accordion("resize") 
Вызов этого метода запускает пересчет высоты аккордеона. Имеет смысл при включенном свойстве fillSpace. К примеру, если контейнер внутри которого находится контейнер является растягиваемым, стоит вызывать этот метод при изменении размеров контейнера.

↓ Внутреннее имя события :внешнее имя
create:accordioncreate
Событие create происходит в момент инициализации accordion на элементе.
// обработка события create
$("selector").accordion({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "accordioncreate", function(event, ui){ ... });
change:accordionchange
Событие change происходит при переключении вкладок аккордеона. Если переключение анимировано, то это событие будет происходить в течении выполнения анимации (неоднократно). Если вам нужно среагировать на переключение лишь один раз, используйте событие changestart.
// второй параметр передаваемый в обработчик будет обладать специфическими полями:
$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // объект jQuery с элементом, являющимся заголовком ОТКРЫВАЮЩЕЙСЯ вкладки
  ui.oldHeader // -||-||- ЗАКРЫВАЮЩЕЙСЯ вкладки
  ui.newContent // объект jQuery с элементом, являющимся содержимым ОТКРЫВАЮЩЕЙСЯ вкладки
  ui.oldContent // -||-||- ЗАКРЫВАЮЩЕЙСЯ вкладки
});
 
// обработка события change
$("selector").accordion({
   change: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "accordionchange", function(event, ui){ ... });
changestart:accordionchangestart
Событие changestart происходит в момент начала переключения вкладок аккордеона.
// второй параметр передаваемый в обработчик будет обладать специфическими полями:
$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // объект jQuery с элементом, являющимся заголовком ОТКРЫВАЮЩЕЙСЯ вкладки
  ui.oldHeader // -||-||- ЗАКРЫВАЮЩЕЙСЯ вкладки
  ui.newContent // объект jQuery с элементом, являющимся содержимым ОТКРЫВАЮЩЕЙСЯ вкладки
  ui.oldContent // -||-||- ЗАКРЫВАЮЩЕЙСЯ вкладки
});
 
// обработка события changestart
$("selector").accordion({
   changestart: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "accordionchangestart", function(event, ui){ ... });

Плагин Accordion использует стандартные стили jQueryUI-css для оформления аккордеона. В частности, оттуда используются цвета, фоны (background) и текстуры. Для их редактирования рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций с элементами аккордеона, можно воспользоваться информацией о присваиваемых им классах:

Основными классами здесь являются следующие:

  • ui-accordion — присваивается элементу к которому был применен плагин Accordion.
  • ui-accordion-header — присваивается элементам, являющимся заголовками вкладок.
  • ui-accordion-content — присваивается всем элементам, являющимся контейнером для содержимого вкладок.
  • ui-accordion-content-active — присваивается открытым элементам, являющимся контейнером для содержимого вкладок.