Руководство jQuery - accordion(options)

Опубликовано admin - вт, 05/01/2018 - 23:02

[Function] accordion(options)

Данный плагин позволяет сделать выбранные элементы графическим интерфейсом.

Сигнатура

accordion(options) → jQuery

Описание

Сделать выбранные элементы графическим интерфейсом. Требование к семантике:

Для создания разметки вашего контейнера необходима пара - заголовок и содержимое панелей. По умолчанию, элементы - заголовки являются анкерами, при условии следующей структуры:
<div id="accordion">
<a href="#">First header</a>
<div>First content</div>
<a href="#">Second header</a>
<div>Second content</div>
</div>
Если вы используете другие элементы для заголовков, указывайте заголовок - опцию с данными селектороми, напр. заголовок: 'h3'. Содержимое элемента всегда должно быть после его заголовка.
Если вы имеете ссылки внутри содержимого «аккордиона» и используете a элементы как заголовки, добавьте класс к ним и тогда используйте их как заголовки, напр. заголовок: 'a.header'.

Использование метода activate(Number) изменяет активные разделы панели.

Примечание: Если вам необходимы многочисленные разделы, открываемые единожды, не используйте данный плагин
Данный плагин не позволяет открывать более чем одну панель с содержанием в одно и то же время, что бы этого достичь необходима масса усилий. Если вы ищете графический интерфейс, который позволяет открывать несколько панелей за раз, не используйте данный плагин. Достичь этого можно написав несколько строк jQuery, взамен использования данного плагина, что-нибудь на подобие этого:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
или с анимацией:
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

$(function() {
		$("#accordion").accordion();
	});


  });
</script>

</head>
<body class="iframe">



<div class="demo">

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
	<p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
	<p>
	Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
	purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
	velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
	suscipit faucibus urna.
	</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
	<p>
	Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
	Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
	ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
	lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
	</p>
	<ul>
		<li>List item one</li>
		<li>List item two</li>
		<li>List item three</li>
	</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
	<p>
	Cras dictum. Pellentesque habitant morbi tristique senectus et netus
	et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
	faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
	mauris vel est.
	</p>
	<p>
	Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
	Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
	inceptos himenaeos.
	</p>
</div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>
Click headers to expand/collapse content that is broken into
 logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) 
and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->

</body>
</html>

Параметры

Опции

Опция: active

Опция устанавливает, какой элемент изначально является активным. Установив false, то ни один из элементов не будет активным (все скрыты). При необходимости используйте collapsible: true.

"По умолчанию установлено"first child

Использовать плагин с опцией active.

$('.selector').accordion({ active: 2 });

Установить или получить опцию active после запуска.

//получить опцию
var active = $('.selector').accordion('option', 'active');
//установить опцию
$('.selector').accordion('option', 'active', 2);

Опция: animated

Опция позволяет выбрать вашу любимую анимацию, или отключить её (указав false). К анимации, помимо существующей по умолчанию, добавлен метод 'bounceslide' и все методы easing ('bounceslide' нуждается в плагине UI Effects Core).

"По умолчанию установлено"slide

Использовать плагин с опцией animated.

$('.selector').accordion({ animated: 'bounceslide' });

Установить или получить опцию animated после запуска.

//получить опцию
var animated = $('.selector').accordion('option', 'animated');
//установить опцию
$('.selector').accordion('option', 'animated', 'bounceslide');

Опция: connectWith

Если опция установлена, то совойство height самого высокого элемента становиться высотой для всех других частей содержимого. Опция обеспечивает единообразную анимацию.

"По умолчанию установлено"true

Использовать плагин с опцией the autoHeight.

$('.selector').accordion({ autoHeight: false });

Установить или получить опцию autoHeight после запуска.

//получить опцию
var autoHeight = $('.selector').accordion('option', 'autoHeight');
//установить опцию
$('.selector').accordion('option', 'autoHeight', false);

Опция: clearStyle

Если установлено, то стилевые свойства height и overflow после прекращения анимации очищаются. Это позволяет создавать графический интерфейс для работы с динамическим содержанием. Не будет работать вместе с опцией autoHeight.

"По умолчанию установлено"false

Использовать плагин с опцией the clearStyle.

$('.selector').accordion({ clearStyle: true });

Установить или получить опцию clearStyle после запуска.

//получить опцию
var clearStyle = $('.selector').accordion('option', 'clearStyle');
//установить опцию
$('.selector').accordion('option', 'clearStyle', true);

Опция: collapsible

Опция определяет, могут ли все секции закрываться одновременно. Опция так же позволяет свёртывать активные секции с помощью события (по умолчанию им является click).

"По умолчанию установлено"false

Использовать плагин с опцией the collapsible.

$('.selector').accordion({ collapsible: true });

Установить или получить опцию collapsible после запуска.

//получить опцию
var collapsible = $('.selector').accordion('option', 'collapsible');
//установить опцию
$('.selector').accordion('option', 'collapsible', true);

Опция: event

Событие, которое запускает свёртывание и развёртывание секции.

"По умолчанию установлено"click

Использовать плагин с опцией event.

$('.selector').accordion({ event: 'mouseover' });

Установить или получить опцию event после запуска.

//получить опцию
var event = $('.selector').accordion('option', 'event');
//установить опцию
$('.selector').accordion('option', 'event', 'mouseover');

Опция: fillSpace

Если указано, то размеры графического интерфейса полностью соответствует высоте родительского элемента. Не принимая во внимание свойство autoheight.

"По умолчанию установлено"false

Использовать плагин с опцией fillSpace.

$('.selector').accordion({ fillSpace: true });

Установить или получить опцию fillSpace после запуска.

//получить опцию
var fillSpace = $('.selector').accordion('option', 'fillSpace');
//установить опцию
$('.selector').accordion('option', 'fillSpace', true);

Опция: header

Опция определяет селектор, определяющий заголовок.

"По умолчанию установлено"> li > :first-child,> :not(li):even

Использовать плагин с опцией header.

$('.selector').accordion({ header: 'h3' });

Установить или получить опцию header после запуска.

//получить опцию
var header = $('.selector').accordion('option', 'header');
//установить опцию
$('.selector').accordion('option', 'header', 'h3');

Опция: icons

Опция определяет значок используемый в заголовках. Значок может быть определен через классы 'header' и 'headerSelected', мы рекомендуем использовать «родные» значки для фреймовика jQuery UI CSS, изменяемые с помощью <a href="http://jqueryui.com/themeroller/">jQuery UI ThemeRoller</a>.

"По умолчанию установлено"{'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }

Использовать плагин с опцией icons.

$('.selector').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });

Установить или получить опцию icons после запуска.

//получить опцию
var icons = $('.selector').accordion('option', 'icons');
//установить опцию
$('.selector').accordion('option', 'icons', { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' });

Опция: navigation

Если установлено, то осуществляется поиск анкера соответствующего выражению, указанному в location.href и активирует элемент соответствующий выражению. Великолепно подходит для сохранения элементов основанных на href. Используйте опцию navigationFilter для установки выражения.

"По умолчанию установлено"false

Использовать плагин с опцией navigation.

$('.selector').accordion({ navigation: true });

Установить или получить опцию navigation после запуска.

//получить опцию
var navigation = $('.selector').accordion('option', 'navigation');
//установить опцию
$('.selector').accordion('option', 'navigation', true);

Опция: navigationFilter

Перезаписывает свойство location.href вашим собственным выражением.

"По умолчанию установлено"

Использовать плагин с опцией navigationFilter.

$('.selector').accordion({ navigationFilter: function(){ ... } });

Установить или получить опцию navigationFilter после запуска.

//получить опцию
var navigationFilter = $('.selector').accordion('option', 'navigationFilter');
//установить опцию
$('.selector').accordion('option', 'navigationFilter', function(){ ... });

События

Событие: change

Данное событие запускается каждый раз как происходит свёртывание или развёртывание секции. Если развёртывание или свёртывание сопровождается анимацией, событие возникает после завершения анимации; во всех других случаях событие возникает немедленно. $('.ui-accordion').bind('accordionchange', function(event, ui) { ui.newHeader // jQuery объект, активирующий заголовок ui.oldHeader // jQuery объект, прежний заголовок ui.newContent // jQuery объектt, активирующий контент ui.oldContent // jQuery объект, прежний контент });

Установить функцию обратного вызова для обработки события change как инициализирующую.

$('.selector').accordion({
   change: function(event, ui) { ... }
});

Связать событие change с типом: accordionchange.

$('.selector').bind('accordionchange', function(event, ui) {
  ...
});

Событие: changestart

Данное событие возникает каждый раз, когда начинается развёртывание. $('.ui-accordion').bind('accordionchangestart', function(event, ui) { ui.newHeader // jQuery object, activated header ui.oldHeader // jQuery object, previous header ui.newContent // jQuery object, activated content ui.oldContent // jQuery object, previous content });

Установить функцию обратного вызова для обработки события changestart как инициализирующую опцию.

$('.selector').accordion({
   changestart: function(event, ui) { ... }
});

Связать событие changestart с типом: accordionchangestart.

$('.selector').bind('accordionchangestart', function(event, ui) {
  ...
});

Методы

Метод: destroy

.accordion('destroy')

Удалить функциональность созданную данным плагином полночью. Данный метод возвращает элемент к его предшествующему состоянию.

Метод: disable

.accordion('disable')

Отключить развёртывание.

Метод: enable

.accordion('enable')

Включить развёртывание.

Метод: option

.accordion('option',optionName ,[value])

Установить или получить опцию данного плагина. Если не указано значение, функция получает опцию.

Метод: activate

.accordion('activate',index)

Активирует часть содержимого графического интерфеса. Индекс может быть числовым (начинается с нуля) для выбора позиции заголовка, который будет закрыт, или селектором выбираемого элемента. Передайте false для закрытия всех секций (возможно только с использованием опции collapsible:true).

Тема:

Используемая тема jQuery UI

Плагин jQuery UI Accordion использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более глубокий уровень настройки, существует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-accordion ui-widget ui-helper-reset">
  <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
    <span class="ui-icon ui-icon-triangle-1-s"/>
    <a href="#">Section 1</a>
  </h3>
  <div class="ui-accordion-content 
  ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
    Section 1 content
  </div>
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 2</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 2 content
  </div>
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 3</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 3 content
  </div>
</div>

Примечание: Данный образец разметки создан посредством плагина accordion, это не разметка для того чтобы свертывать и развёртывать элементы. Для этого достаточно следующей разметки: <div> <h3><a href="#">Section 1</a></h3> <div> Section 1 content </div> <h3><a href="#">Section 2</a></h3> <div> Section 2 content </div> <h3><a href="#">Section 3</a></h3> <div> Section 3 content </div> </div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Руководство по jQuery!

Плагины jQuery UI

Эффекты