Виджет Аккордеон

Виджет Аккордеонверсия добавлена: 1.0

Описание: Преобразует пару заголовков и панелей содержимого в аккордеон.

Быстрый НавигаторПримеры

Разметка контейнера аккордеона должна содержать пары заголовков и панелей содержимого:

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

Аккордеоны поддерживают произвольную разметку, но каждая панель содержимого должна всегда быть следующим элементом после своего связанного заголовка. Обратитесь к параметру header для получения информации о том, как использовать пользовательские структуры разметки.

Панели можно активировать программно, установив параметр active.

Взаимодействие с клавиатурой

Когда фокус находится на заголовке, доступны следующие команды:

UP/LEFT: Переместить фокус на предыдущий заголовок. Если фокус на первом заголовке, перемещает его на последний заголовок.
DOWN/RIGHT: Переместить фокус на следующий заголовок. Если фокус на последнем заголовке, перемещает его на первый заголовок.
HOME: Переместить фокус на первый заголовок.
END: Переместить фокус на последний заголовок.
SPACE/ENTER: Активировать панель, связанную с заголовком, на котором находится фокус.

Когда фокус находится в панели:

CTRL + UP: Переместить фокус на связанный заголовок.

Стилевое оформление

Виджет аккордеона использует фреймворк стилей jQuery UI CSS для стилизации внешнего вида. Если требуется специфическая стилизация аккордеона, можно использовать следующие имена классов CSS для переопределения или как ключи для параметра classes:

ui-accordion: Внешний контейнер аккордеона.
- ui-accordion-header: Заголовки аккордеона. Активный заголовок дополнительно получит класс ui-accordion-header-active, неактивные заголовки получат класс ui-accordion-header-collapsed. Заголовки также получат класс ui-accordion-icons, если они содержат icons.
  - ui-accordion-header-icon: Элементы иконок внутри каждого заголовка аккордеона.
- ui-accordion-content: Панели содержимого аккордеона. Активная панель содержимого дополнительно получит класс ui-accordion-content-active.

Зависимости

UI Core
Фабрика Виджетов
Effects Core (необязательно; для использования с параметром animate)

Дополнительные замечания:

Этот виджет требует функционального CSS, иначе он не будет работать. При создании пользовательской темы используйте файл CSS виджета в качестве отправной точки.

Параметры

active

Тип: Булево или Целое число

По умолчанию: 0

Какой раздел сейчас открыт.

Поддерживаются несколько типов:

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

Примеры кода:

Инициализация аккордеона с указанным параметром active:

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

Получение или установка параметра active после инициализации:

// Getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// Setter
$( ".selector" ).accordion( "option", "active", 2 );

animate

Тип: Булево или Число или Строка или Объект

По умолчанию: {}

Как и при каких условиях происходит анимация изменения разделов.

Поддерживаются несколько типов:

Булево: Значение false отключит анимацию.
Число: Длительность в миллисекундах с использованием стандартного ускорения.
Строка: Название функции ускорения для использования со стандартной длительностью.
Объект: Объект, содержащий свойства easing и duration для настройки анимации.
- Также может содержать свойство down с любыми из вышеперечисленных параметров.
- Анимация «Вниз» происходит, когда раздел, который активируется, имеет меньший индекс, чем текущий активный раздел.

Примеры кода:

Инициализация аккордеона с указанным параметром animate:

$( ".selector" ).accordion({
  animate: 200
});

Получение или установка параметра animate после инициализации:

// Getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// Setter
$( ".selector" ).accordion( "option", "animate", 200 );

classes

Тип: Объект

По умолчанию:

{
  "ui-accordion-header": "ui-corner-top",
  "ui-accordion-header-collapsed": "ui-corner-all",
  "ui-accordion-content": "ui-corner-bottom"
}

Укажите дополнительные классы, которые необходимо добавить к элементам виджета. Любой из классов, указанных в разделе оформления, может быть использован как ключ для переопределения его значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей classes.

Примеры кода:

Инициализация аккордеона с указанным параметром classes, изменяя оформление для класса ui-accordion:

$( ".selector" ).accordion({
  classes: {
    "ui-accordion": "highlight"
  }
});

Получение или установка свойства параметра classes после инициализации, здесь читается и изменяется оформление для класса ui-accordion:

// Getter
var themeClass = $( ".selector" ).accordion( "option", "classes.ui-accordion" );
 
// Setter
$( ".selector" ).accordion( "option", "classes.ui-accordion", "highlight" );

collapsible

Тип: Булево

По умолчанию: false

Можно ли одновременно закрыть все разделы. Позволяет свернуть активный раздел.

Примеры кода:

Инициализация аккордеона с указанным параметром collapsible:

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

Получение или установка параметра collapsible после инициализации:

// Getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// Setter
$( ".selector" ).accordion( "option", "collapsible", true );

disabled

Тип: Булево

По умолчанию: false

Отключает аккордеон, если установлено true.

Примеры кода:

Инициализация аккордеона с указанным параметром disabled:

$( ".selector" ).accordion({
  disabled: true
});

Получение или установка параметра disabled после инициализации:

// Getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// Setter
$( ".selector" ).accordion( "option", "disabled", true );

event

Тип: Строка

По умолчанию: "click"

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

Примеры кода:

Инициализация аккордеона с указанным параметром event:

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

Получение или установка параметра event после инициализации:

// Getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// Setter
$( ".selector" ).accordion( "option", "event", "mouseover" );

header

Тип: Селектор или Функция( jQuery accordionElement )

По умолчанию: function( elem ) { return elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() ); }

Данные, идентифицирующие элемент заголовка. Разделы должны быть расположены непосредственно после своих соответствующих заголовков.

Поддерживаются несколько типов:

Селектор: Селектор для элемента заголовка, применяемый с помощью .find() к основному элементу аккордеона.
Функция: Функция, принимающая элемент аккордеона и возвращающая элемент заголовка (добавлен в 1.13).

Примеры кода:

Инициализация аккордеона с указанным параметром header:

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

Получение или установка параметра header после инициализации:

// Getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// Setter
$( ".selector" ).accordion( "option", "header", "h3" );

Инициализация аккордеона с указанным параметром header в качестве функции:

$( ".selector" ).accordion({
  header: function ( accordionElement ) {
    return accordionElement.find( "h3" );
  }
});

heightStyle

Тип: Строка

По умолчанию: "auto"

Управление высотой аккордеона и каждого раздела. Возможные значения:

"auto": Все разделы будут настроены на высоту самого высокого раздела.
"fill": Расширение до доступной высоты на основе высоты родительского элемента аккордеона.
"content": Каждый раздел будет иметь высоту, соответствующую только своему содержанию.

Примеры кода:

Инициализация аккордеона с указанным параметром heightStyle:

$( ".selector" ).accordion({
  heightStyle: "fill"
});

Получение или установка параметра heightStyle после инициализации:

// Getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// Setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );

icons

Тип: Объект

По умолчанию:

{
  "header": "ui-icon-triangle-1-e",
  "activeHeader": "ui-icon-triangle-1-s"
}

Иконки для заголовков, соответствующие иконкам, предоставляемым фреймворком jQuery UI CSS. Установите значение false для отключения отображения иконок.

header (строка, по умолчанию: "ui-icon-triangle-1-e")
activeHeader (строка, по умолчанию: "ui-icon-triangle-1-s")

Примеры кода:

Инициализация аккордеона с указанным параметром icons:

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

Получение или установка параметра icons после инициализации:

// Getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// Setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность аккордеона. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).accordion( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Деактивирует аккордеон.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода disable:

$( ".selector" ).accordion( "disable" );

enable()Возвращает: jQuery (только для плагина)

Активирует аккордеон.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода enable:

$( ".selector" ).accordion( "enable" );

instance()Возвращает: Объект

Возвращает объект экземпляра аккордеона. Если у элемента нет связанного экземпляра, undefined возвращается.

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

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода instance:

$( ".selector" ).accordion( "instance" );

option( optionName )Возвращает: Объект

Получает значение, в данный момент связанное с указанным optionName.

Примечание: Для опций, значениями которых являются объекты, можно получить значение определённого ключа, используя точечную нотацию. Например, "foo.bar" получит значение свойства bar в опции foo.

optionName

Тип: Строка

Имя опции, значение которой нужно получить.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );

option()Возвращает: ОбъектPlain

Получает объект, содержащий пары "ключ-значение", представляющие текущий хэш опций аккордеона.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).accordion( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение опции аккордеона, связанной с указанным optionName.

Примечание: Для опций, значениями которых являются объекты, можно установить значение только одного свойства, используя точечную нотацию для optionName. Например, "foo.bar" обновит только свойство bar опции foo.

optionName

Тип: Строка

Имя опции, которую нужно установить.
value

Тип: Объект

Значение для установки опции.

Примеры кода:

Вызов метода:

$( ".selector" ).accordion( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает одну или несколько опций для аккордеона.

options

Тип: Объект

Карта пар "опция-значение" для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).accordion( "option", { disabled: true } );

refresh()Возвращает: jQuery (только для плагина)

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

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода refresh:

$( ".selector" ).accordion( "refresh" );

События

activate( event, ui )Тип: `accordionactivate`

Срабатывает после активации панели (после завершения анимации). Если аккордеон был ранее свёрнут, ui.oldHeader и ui.oldPanel будут пустыми объектами jQuery. Если аккордеон сворачивается, ui.newHeader и ui.newPanel будут пустыми объектами jQuery.

Примечание: Поскольку событие activate срабатывает только при активации панели, оно не срабатывает для начальной панели при создании виджета аккордеона. Если вам нужен обработчик для создания виджета, используйте событие create.

event

Тип: Событие
ui

Тип: Объект
- newHeader
  
  Тип: jQuery
  
  Заголовок, который был только что активирован.
- oldHeader
  
  Тип: jQuery
  
  Заголовок, который был только что деактивирован.
- newPanel
  
  Тип: jQuery
  
  Панель, которая была только что активирована.
- oldPanel
  
  Тип: jQuery
  
  Панель, которая была только что деактивирована.

Примеры кода:

Инициализируйте аккордеон, указав обратный вызов activate:

$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});

Привяжите обработчик событий к событию accordionactivate:

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );

beforeActivate( event, ui )Тип: `accordionbeforeactivate`

Срабатывает непосредственно перед активацией панели. Может быть отменён, чтобы предотвратить активацию панели. Если аккордеон в данный момент свёрнут, ui.oldHeader и ui.oldPanel будут пустыми объектами jQuery. Если аккордеон сворачивается, ui.newHeader и ui.newPanel будут пустыми объектами jQuery.

event

Тип: Событие
ui

Тип: Объект
- newHeader
  
  Тип: jQuery
  
  Заголовок, который собирается активироваться.
- oldHeader
  
  Тип: jQuery
  
  Заголовок, который собирается деактивироваться.
- newPanel
  
  Тип: jQuery
  
  Панель, которая собирается активироваться.
- oldPanel
  
  Тип: jQuery
  
  Панель, которая собирается деактивироваться.

Примеры кода:

Инициализируйте аккордеон, указав обратный вызов beforeActivate:

$( ".selector" ).accordion({
  beforeActivate: function( event, ui ) {}
});

Привяжите обработчик событий к событию accordionbeforeactivate:

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );

create( event, ui )Тип: `accordioncreate`

Срабатывает при создании аккордеона. Если аккордеон свёрнут, ui.header и ui.panel будут пустыми объектами jQuery.

event

Тип: Событие
ui

Тип: Объект
- header
  
  Тип: jQuery
  
  Активный заголовок.
- panel
  
  Тип: jQuery
  
  Активная панель.

Примеры кода:

Инициализируйте аккордеон, указав обратный вызов create:

$( ".selector" ).accordion({
  create: function( event, ui ) {}
});

Привяжите обработчик событий к событию accordioncreate:

$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );

Пример:

Простой jQuery UI Аккордеон

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    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.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

Виджет Аккордеон