Пример использования

Пример

$(document).ready(function() {

   $("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#accordion1").accordion();
//Код второй вкладки (без подгона высоты)
   $("#accordion2").accordion({autoHeight:false});
//Код третьей вкладки (сворачивание активной вкладки)
   $("#accordion3").accordion({autoHeight:false,collapsible:true});
//Код четвертой вкладки (открытие при наведении)
   $("#accordion4").accordion({autoHeight:false,event:'mouseover'});

});

Попробовать в редакторе

Определение и использование

С помощью метода accordion Вы можете превратить выбранный элемент в виджет accordion.

Виджет accordion в основном используется для того, чтобы более компактно отобразить содержимое и сэкономить место на странице.

Разметка виджета должна состоять из чередующихся пар: заголовок, содержимое.

Синтаксис:

<div id="accordion">
<h2><a href="#">Первый заголовок</a></h2>
<div>Содержимое первого заголовка</div>
<h2><a href="#">Второй заголовок</a></h2>
<div>Содержимое второго заголовка</div>
</div>

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настраивать поведение данного виджета под конкретные нужды.

Синтаксис

$(селектор).accordion(опции,события)

селектор выбирает элемент, который будет превращен в виджет.

опции настраивают дополнительные аспекты поведения виджета.

события события связанные с данным виджетом.

Опции

Опции	Описание
active	Активный по умолчанию заголовок (нумерация заголовков начинается с 0). Значение по умолчанию: 0. Пример использования: .accordion({active:'3'})
animated	Позволяет изменить анимацию открытия вкладки или выключить ее (значение false). Значение по умолчанию: 'slide'. Пример использования: .accordion({animated:'bounceslide'})
autoHeight	Указывает нужно ли подгонять высоту содержимого всех заголовков под высоту самого высокого заголовка (значение true) или нет (false). Значение по умолчанию: true. Пример использования: .accordion({autoHeight:false})
collapsible	Позволяет сворачивать содержимое активной вкладки. Значение по умолчанию: false. Пример использования: .accordion({collapsible:true})
event	Определяет событие, после вызова которого будут открываться вкладки. Значение по умолчанию: 'click'. Пример использования: .accordion({event:'dblclick'})
fillSpace	Если имеет значение true виджет будет заполнять всю высоту родительского элемента. Значение по умолчанию: false. Пример использования: .accordion({fillSpace:true})
icons	Позволяет задать иконку, которая будет отображаться в заголовках виджета. Вид иконки задается с помощью объекта icons, свойство header которого задает иконку для заголовка с нераскрытой вкладкой, а headerSelected для заголовка с раскрытой вкладкой. Значение по умолчанию: {icons:{'header':'ui-icon-triangle-1-e','headerSelected':'ui-icon-triangle-1-s'}}. Пример использования: .accordion({icons:{'header':'ui-icon-circle-triangle-e','headerSelected':'ui-icon-circle-triangle-s'}})

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Синтаксис

$(селектор).accordion({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("accordionсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к виджету с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").accordion({create:function(event,ui){alert("Привет")}).

События	Описание
create	Определяет функцию, код которой будет выполнен, когда виджет будет создан.
change	Определяет функцию, код которой будет выполнен после открытия новой вкладки. Если вкладки открываются анимированно код функции будет выполнен после завершения анимации.
changestart	Определяет функцию, код которой будет выполнен после того, как открытие вкладки будет инициализировано пользователем, но перед тем как вкладка будет отрыта.

« Виджеты jQuery UI