Виджет accordion
используется для создания аккордеонов:
<h3>Языки программирования</h3> <div id="accordion"> <h3>Java</h3> <div>Описание языка Java</div> <h3>JavaScript</h3> <div>Описание языка JavaScript</div> <h3>C#</h3> <div>Описание языка C#</div> </div> <script type="text/javascript"> $(function(){ $('#accordion').accordion(); }); </script>
На предыдущем рисунке, возможно, кому-то покажется, что шрифт надписей виджета слишком велик. Возможно, потребуется настроить какие-либо еще
свойства. И мы можем выполнить настройку стилей, применив их к классу ui-accordion
.
Аккордеон структурно подразделяется на заголовок и основную часть. И кроме стилей аккордеона в целом, мы также можем настроить по отдельности
стили заголовка, применив их к классу ui-accordion-header
, и стили основной части - их применяют к классу ui-accordion-content
:
<html> <head> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css"></style> <script src="jquery-2.0.2.min.js"></script> <script src="jquery-ui-1.10.3.custom.min.js"></script> <style> .ui-accordion {font-size: 12px;} .ui-accordion-header {font-size: 13px;} .ui-accordion-content {font-style: italic;} </style> </head> <body> <h3>Языки программирования</h3> <div id="accordion"> <h3>Java</h3> <div>Описание языка Java</div> <h3>JavaScript</h3> <div>Описание языка JavaScript</div> <h3>C#</h3> <div>Описание языка C#</div> </div> <script type="text/javascript"> $(function(){ $('#accordion').accordion(); }); </script> </body> </html>
Аккордеоны в jquery ui имеет следующие свойства:
collapsible
: при установке этого свойства в true
при нажатии на заголовок мы можем скрывать содержимое блока ($('#accordion').accordion({collapsible:false});
).
По умолчанию имеет значение false
, поэтому скрыть один блок мы можем только нажав на заголовок другого блока
active
: указывает, какой блок в текущий момент является активным. Например, $('#accordion').accordion({active:2});
- здесь при создании виджета будет раскрыта третья вкладка,
так как нумерация начинается с 0. По умолчанию активной является первая вкладка.
animate
: данное свойство указывает, будет ли виджет анимироваться, а если будет, то как. Данное свойство может принимать ряд значений.
Если свойство имеет значение false
, то анимация отключается. Это проявляется в мгновенном открытии новых блоков, а при true
подобное открытие происходит плавно.
Также данное свойство может иметь числовое значение, которое устанавливает время анимации в миллисекундах.
Также значение может представлять строковое название функции плавности анимации, например, linear
, swing
, easeInCubic
и другие функции. Например: $('#accordion').accordion({animate:'easeInCubic'})
.
И также можно установить в качестве значения объект, включающий как название функции плавности, так и длительность анимации в миллисекундах:
$('#accordion').accordion({animate: {easing:'easeInCubic', duration: 800}});
.
disabled
: при установке у свойства значения true
отключает виджет. По умолчанию имеет значение false
.
event
: данное свойство в качестве значения принимает событие, при возникновении которого будет происходить переключение
блоков в аккордеоне: $('#accordion').accordion({event:'mouseover'})
- здесь переключение блоков будет осуществляться при наведении мыши
(событие mouseover) на заголовок блока. По умолчанию переключение происходит по событию click
.
icons
: используя это свойство, мы можем задать иконку, отображаемую рядом с заголовком блока. По умолчанию это свойство имеет значение
{"header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s"}
- в данном случае опция ui-icon-triangle-1-e
указывает иконку для всех заголовков блоков, а опция activeHeader
- для активных.
Мы можем переопределить иконку: $('#accordion').accordion({icons: {"header": "ui-icon-plus", "activeHeader": "ui-icon-minus"}})
.
Полный список используемых иконок можно найти по адресу https://api.jqueryui.com/theming/icons/
Виджет аккордеон имеет следующие методы:
accordion("disable"): делает аккордеон недоступным ($("#accordion").accordion("disable");
)
accordion("enable"): делает аккордеон доступным для взаимодействия
accordion("destroy"): удаляет функциональность аккордеона у элемента
accordion("widget"): возвращает объект jQuery, представляющий виджет (var widget = $("#accordion").accordion("widget");
)
accordion("option"): позволяет получить или установить значения свойств аккордеона. Например, установим и получим значение свойства collapsible:
$('#accordion').accordion(); // установка $('#accordion').accordion('option', 'collapsible', true); // получение значения var isCollapsible=$('#accordion').accordion('option', 'collapsible'); console.log(isCollapsible);
Аккордеоны имеют следующие события:
activate(event, ui)
: событие возникает после выбора блока в аккордеоне, то есть его активации.
Если параметр event
содержит объект события, то параметр ui
представляет объект, который содержит информацию
об активированном блоке, а также о том блоке, который до этого был активным. Этот параметр имеет следующие свойства:
newHeader: заголовок блока, который активирован
oldHeader: заголовок блока, который до этого был активным
newPanel: панель блока, который активирован
oldPanel: панель блока, который был активным до выбора текущего активного блока
Например, получим заголовки текущего активного блока и блока, который ранее был активным:
$('#accordion').accordion({ activate: function( event, ui ) { console.log("Была активной панель: " + $(ui.oldHeader).text()); console.log("Стала активной панель: " + $(ui.newHeader).text()); } });
create(event, ui)
: возникает при создании виджета
beforeActivate(event, ui)
: возникает непосредственно перед активацией блока аккордеона