Accordion
~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Нажмите по заголовку закрытой вкладки и она развернется, открытая вкладка при этом свернется. По умолчанию, все вкладки будут иметь одинаковую высоту (такую, чтобы содержимое любой из вкладок могло бы туда вместиться).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
#accordion{font:normal 9pt Arial,sans-serif;}
img{float:left; height:90px; margin-right:7px}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
~lt~img src="http://tinyurl.com/3t3ghzk"~gt~
~lt~i~gt~Глазго~lt~/i~gt~ — крупнейший город Шотландии и третий по численности населения в Великобритании (после Лондона и Бирмингема). Является административным центром области Глазго. Расположен на западе центральной части Шотландии, на реке Клайд в 32 км от её устья.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
~lt~i~gt~Войны мороженщиков в Глазго~lt~/i~gt~ — серия конфликтов в шотландском городе Глазго между конкурирующими наркоторговцами,
развозившими свой товар в фургонах для продажи мороженого. Противостояние, продолжавшееся до середины 1980-х годов и
сопровождавшееся ежедневным устрашением и актами насилия, привело к смерти от поджога квартиры нескольких членов семьи одного из водителей и последующему судебному разбирательству, длившемуся более 20 лет.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
~lt~i~gt~Миллуоллский кирпич~lt~/i~gt~ — импровизированное оружие футбольных хулиганов, изготовленное из скрученной газеты и зажимаемое в кулаке наподобие свинчатки. Оружие получило своё название от названия английского футбольного клуба «Миллуолл», болельщики которого использовали его в драках на протяжении 1960—1970-х гг. Популярность оружия была обусловлена простотой конструкции и лёгкостью, с которой его можно было пронести на стадион.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 4~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
~lt~img src="https://tinyurl.com/3sn6e3t"~gt~~lt~i~gt~Скрудж Макдак~lt~/i~gt~ — мультипликационный персонаж, антропоморфный селезень шотландского происхождения из города Глазго, главный герой диснеевского мультсериала «Утиные истории». В 2007 году городской совет города Глазго включил Скруджа Макдака в список выдающихся горожан.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#accordion" ).accordion();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Ограничение по высоте~lt~/tit~gt~
~lt~coment~gt~Аккордеон занимает все возможное горизонтальное пространство внутри своего родителя. Если необходимо, чтобы он занимал также и все свободное пространство по вертикали, необходимо установить свойство fillSpace в true. Однако, это не означает, что если родитель изменит свою высоту, то аккордеон изменит свою вслед за ним. Такое поведение необходимо организовывать самостоятельно (см. исходный код этого примера).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
#resizerWrap{height:300px; padding:7px; background-color:#f8f8f8}
#accordion{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="resizerWrap"~gt~
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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. 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.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#accordion" ).accordion({fillSpace:true});
$( "#resizerWrap" ).resizable({
minHeight:300,
resize: function(){
$( "#accordion" ).accordion("resize");
}
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Высота по содержимому~lt~/tit~gt~
~lt~coment~gt~По умолчанию, высота у всех вкладок аккордеона одинаковая. Однако, если установить свойство autoHeight в false, вкладки будут иметь разную высоту (равную высоте содержимого для каждой вкладки).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
#accordion{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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. 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.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#accordion" ).accordion({autoHeight:false});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Сворачивание всех вкладок~lt~/tit~gt~
~lt~coment~gt~По умолчанию, одна из вкладок аккордеона всегда будет открыта. Однако, установив collapsible в true, вы научите аккордеон закрываться полностью (для закрытия открытой вкладки необходимо кликнуть по ее заголовку).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
#accordion{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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. 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.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#accordion" ).accordion({collapsible:true});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Условия разворачивания~lt~/tit~gt~
~lt~coment~gt~С помощью свойства event можно задать событие, которое вызовет разворачивание той вкладки, на которой оно произошло. На этом примере задан тип события "mouseover" (наведение курсора). К этому свойству применимо одно нестандартное событие - "hoverintent", которое срабатывает если курсор задерживается на элементе более секунды~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
#accordion{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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. 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.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#accordion" ).accordion({event:"mouseover"});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Настройка иконок~lt~/tit~gt~
~lt~coment~gt~Иконки, показывающие открытость/закрытость вкладки можно настраивать. Для этого укажите класс(ы) для оформления иконок в формате {header:"класс закрытой вкладки", headerSelected:"класс открытой вкладки"} в параметре icons. Напомним, что для этого можно использовать стандартные классы иконок jQuery UI.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
#accordion{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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. 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.
~lt~/p~gt~
~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~
~lt~p~gt~
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.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({icons:icons});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Описание
Свойства
Методы
События
Оформление
Плагин Accordion позволяет превратить выбранные элементы страницы в виджеты, которые обычно называют аккордеонами. Допустим, вам необходимо превратить в такой виджет элемент с идентификатором accordion для этого необходимо, чтобы внутри он имел следующую структуру:
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Первый заголовок~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~Содержимое для первого заголовка~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Второй заголовок~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~Содержимое для второго заголовка~lt~/div~gt~
...
~lt~/div~gt~
Если вы хотите использовать в качестве заголовков другие элементы (к примеру, ссылки с классом header (т.е. без h3)), то лучше указать для этого соответствующие селекторы в свойстве header (для ссылок с классом header - "a.header").
Чтобы открыть нужную (с нужным номером) вкладку программно, используйте метод .accordion( "activate" , index ).
Нужная вкладка может быть открыта по принципу якоря (он работает только при включенном свойстве navigation): если вам необходимо сделать ссылку на страницу с аккордеоном, чтобы при этом оказалась открыта нужная вкладка (допустим вторая), необходимо, чтобы элемент a лежащий внутри заголовка этой вкладки, имел уникальный параметр href (допустим "#panel2". Решетка в начале обязательна). В таком случае, ссылка на страницу с нужной открытой вкладкой будет такой httр//site.ru#panel2.
Замечание: если вы хотите чтобы в вашем аккордеоне могли быть открыты сразу несколько вкладок одновременно, то не следует использовать плагин Accordion, лучше найти специально предназначенный для этого плагин или организовать его самостоятельно.
↓ Имя свойства :типы значений (значение по умолчанию)
Останавливает\возобновляет работу плагина 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 );
Этот параметр определяет тип анимации (см. описание параметра
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 ---------
// в момент установки accordion на элемент
$("selector").draggable({ axis: "x" });
//получение значения autoHeight
var autoHeight = $("selector").accordion( "option", "autoHeight" );
//изменение значения autoHeight
$("selector").accordion( "option", "autoHeight", "y" );
Если это свойство включено, то после каждого переключения вкладок будет пересчитана требуемая высота аккордеона. Это может быть удобно, если высота содержимого вкладок может изменяться. Использовать 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 установлено в
true, то нажатие на заголовок открытой вкладки приведет к ее закрытию (если вкладки переключаются при наведении курсора на заголовок, то и закрытие будет происходить при наведении, а не при нажатии).
// ------- Работа со свойством collapsible ---------
// в момент установки accordion на элемент
$("selector").accordion({ collapsible:true });
//получение значения collapsible
var collapsible = $("selector").accordion( "option", "collapsible" );
//изменение значения collapsible
$("selector").accordion( "option", "collapsible", true );
Тип(ы) событий, при возникновение которых будет происходить переключение между вкладками. Напомним, что можно задать несколько типов через пробел. К этому свойству применимо одно нестандартное событие - "hoverintent", которое срабатывает если курсор задерживается на элементе более секунды (это событие доступно только при подключенном jquery UI).
// ------- Работа со свойством event ---------
// в момент установки accordion на элемент
$("selector").accordion({ event:"hoverintent" });
//получение значения event
var event = $("selector").accordion( "option", "event" );
//изменение значения event
$("selector").accordion( "option", "event", "hoverintent" );
Аккордеон занимает все возможное горизонтальное пространство внутри своего родителя. Если необходимо, чтобы он занимал также и все свободное пространство по вертикали, необходимо установить свойство fillSpace в true. Однако, это не означает, что если родитель изменит свою высоту, то аккордеон изменит свою вслед за ним. Такое поведение необходимо организовывать самостоятельно.
// ------- Работа со свойством fillSpace ---------
// в момент установки accordion на элемент
$("selector").accordion({ fillSpace:true });
//получение значения fillSpace
var fillSpace = $("selector").accordion( "option", "fillSpace" );
//изменение значения fillSpace
$("selector").accordion( "option", "fillSpace", true );
С помощью этого свойства можно задать элементы, которые будут использоваться в качестве заголовков.
// ------- Работа со свойством 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'} );
Если этот параметр включен, то вкладки аккордеона можно будет открывать по принципу якорей (см. раздел описание). Если вы хотите самостоятельно обрабатывать ситуацию и принимать решение, о том, какая вкладка должна быть открыта, используйте параметр
navigationFilter.
// ------- Работа со свойством navigation ---------
// в момент установки accordion на элемент
$(".selector").accordion({ navigation:15 });
//получение значения navigation
var navigation = $(".selector").accordion( "option", "navigation" );
//изменение значения navigation
$(".selector").accordion( "option", "navigation", 15 );
С помощью этого свойства можно задать функцию, которая будет вызвана при открытии страницы, для каждой вкладки аккордеона отдельно, чтобы определить, какая из них должна оказаться открытой. Если функция возвратит 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. Для специфичных манипуляций с элементами аккордеона, можно воспользоваться информацией о присваиваемых им классах:
// если применить плагин Accordion к элементу с id=accordion, имеющему следующую структуру
~lt~div id="accordion"~gt~
~lt~h3~gt~~lt~a href="#"~gt~Первый заголовок~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~Содержимое для первого заголовка~lt~/div~gt~
~lt~h3~gt~~lt~a href="#"~gt~Второй заголовок~lt~/a~gt~~lt~/h3~gt~
~lt~div~gt~Содержимое для второго заголовка~lt~/div~gt~
...
~lt~/div~gt~
// то элементам будут присвоены следующие классы (в случае, если открытой будет первая вкладка):
~lt~div id="accordion" class="ui-accordion ui-widget ui-helper-reset"~gt~
~lt~h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"~gt~~lt~a href="#"~gt~Первый заголовок~lt~/a~gt~~lt~/h3~gt~
~lt~span class="ui-icon ui-icon-triangle-1-s"/~gt~
~lt~div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"~gt~
Содержимое для первого заголовка
~lt~/div~gt~
~lt~h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"~gt~~lt~a href="#"~gt~Второй заголовок~lt~/a~gt~~lt~/h3~gt~
~lt~span class="ui-icon ui-icon-triangle-1-e"/~gt~
~lt~div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"~gt~
Содержимое для второго заголовка
~lt~/div~gt~
...
~lt~/div~gt~
Основными классами здесь являются следующие:
- ui-accordion — присваивается элементу к которому был применен плагин Accordion.
- ui-accordion-header — присваивается элементам, являющимся заголовками вкладок.
- ui-accordion-content — присваивается всем элементам, являющимся контейнером для содержимого вкладок.
- ui-accordion-content-active — присваивается открытым элементам, являющимся контейнером для содержимого вкладок.