В библиотеке пользовательского интерфейса jQuery UI имеется многофункциональный виджет accordion, который позволяет разбивать содержимое страницы на несколько групп и быстро переключаться между ними. В каком-то смысле, данный виджет очень похож на вкладки tabs. Сходство связано с тем, что виджет accordion также имеет несколько заголовков и связанные с ними панели с контентом (вкладки). Отличия касаются, в первую очередь, формата описания.

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

Section 1

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.

Section 2

Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa.

List item one
List item two
List item three

Описание примера

Листинг описания примера, представленный ниже, включает секцию <head> с загрузкой необходимых файлов и секцию <body>, в которой определяется структура вкладок accordion с контентом и javascript-код. Комментарий к коду представлен после листинга. Методы обработки нажатий кнопок рассмотрены отдельно.

Скрыть листинг примера


<head>
  <link rel="stylesheet" href="jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.12.4.js">
  </script>
  <script src="https://code.jquery.com/jquery-ui.min.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 type="text/javascript">
   $(function() {
      $("#accordion").accordion();
   });
</script>
</body>

Загрузка библиотек
В секции заголовка определены необходимые файлы со стилями jquery-ui.css и с js-скриптами библиотеки. Вместе с библиотекой jQuery необходимо загрузить интерфейсную библиотеку jQuery UI (jquery-ui.min.js), включающую набор виджетов и плагинов от разработчиков jQuery. Здесь важен порядок загрузки библиотек : сначала нужно загрузить библиотеку jQuery, а затем библиотеку пользовательского интерфейса jQuery UI, которая расширяет jQuery. Необходимую версию библиотеки jQuery UI как в сжатом виде (наименование которой включает аббревиатуру min), так и в открытом виде, Вы можете выбрать на сайте http://code.jquery.com/ui.

Описание вкладок
включено в блок <div> с идентификатором accordion; наименование идентификатора может быть любым. Заголовок вкладки (header) определяются тегом <h3>, после которого сразу же в блоке <div> дочерним элементом описывается её контент (panel) на латинском языке. В качестве заголовочного тега можно использовать не только <h3>.

JavaScript код
включает анонимную функцию, в которой селектором jQuery выбирается блок <div> с идентификатором id="accordion" и вызывается метод accordion(). Этого вполне достаточно, чтобы код примера был представлен в интерфейсе в виде вкладок. Метод accordion() может быть вызван с параметром в виде литерала объекта.

Примечание : ниже в листинге представлены методы получения и определения заголовка header, а также вызов метода accordion с литералом объекта header.

// Getter - получение заголовка виджета
var header = $(".selector").accordion("option", "header");
 
// Setter - определение заголовка виджета
$(".selector").accordion("option", "header", "h3");

// Вызов метода с литералом объекта
$(".selector").accordion({
   header: "h3"
});

Горячие клавиши

При нахождении фокуса на заголовке вкладки accordion можно использовать следующие горячие клавиши :

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

CSS-стили вкладки

Для адаптации интерфейса accordion к стилю представления на сайте необходимо выбрать соответствующий jquery-ui.css. На странице code.jquery.com/ui представлен целый набор различных стилей (Themes) библиотеки jQuery. Конечно же, может так случиться, что ни один из стилей не будет удовлетворять Вас в полном объёме. Т.е. найдется какой-либо элемент вкладки, который необходимо настраивать отдельно. На странице https://jqueryui.com/themeroller Вы можете адаптировать css-файл со стилями для всех виджетов библиотеки jQuery UI, которые используются на Вашем сайте.

В листинге представлены параметры стилей, которые в примере изменяются, демонстрируя возможность адаптации вкладок к интерфейсу сайта. В некоторых параметрах background имеются URL изображений, не указанные в листинге. Значения параметров получены из файла code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css.

Скрыть листинг стилей


.ui-widget-header {
    border     : 1px solid #dddddd;
    background : #e9e9e9;
    color      : #333333;
}

.ui-widget-content {
    background : #ffffff;
    color      : #000;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
    color : 454545;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
   border: 1px solid #d3d3d3;
   background: #e6e6e6;
   font-weight: normal;
   color': '#555555;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border      : 1px solid #aaaaaa;
    background  : #ffffff;
    font-weight : normal;
    color       : #212121;
}

Примечание : виджет accordion использует изображения, описанные в css-файле. В листинге css-параметров не представлены url изображений; см. файл code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css

JS-код переключения вкладок

В представленном ниже листинге javascript-кода определен обработчик переключения вкладок : селектор выбирает DOM-элемент с идентификатором id, равным btnTab, с которым связывается метод click. Таким образом, к кнопке «Переключатель вкладок» подключается обработчик нажатия на кнопку. В методе сначала определяется индекс idx открываемой активной вкладки, после чего вызывается метод открытия вкладки. Обратите внимание, что определение текущей активной вкладки и открытие вкладки выполняются практически с одними и теми же параметрами метода accordion; только во втором случае добавляется индекс открываемой вкладки idx.

Скрыть листинг


<script>
$("#btnTab").click(function (event) {
   // Getter
   let idx=$("#accordion").accordion("option","active")+1;
   if (idx == $("#accordion").find('div').length)
       idx = 0;
   // Setter
   $("#accordion").accordion( "option", "active", idx);
});
</script>

JS-код управления стилями вкладок

Практического применения js-скрипты изменения css-стилей вкладок, конечно же, не имеют, поскольку, как правило, все стили определяются во внешнем файле. Однако, из этого листинга можно понять, какие css-параметры следует настраивать для адаптации вкладок к интерфейсу сайта. Также в данном листинге демонстрируется возможность динамического изменения css-параметров методом $.injectCSS библиотеки jQuery.

Листинг кода изменения css-стилей включает обработчик нажатия кнопки btnStyle и методы changeStyle и restoreStyle. Первый метод изменяет стили представления вкладок, второй метод – восстанавливает стили. Символы переноса '\' используются только для наглядности представления наименований элементов DOM; практически они должны быть указаны одной строкой. При изменении стиля представления вкладок также изменяется изображение иконки.

Скрыть листинг


<script>
$("#btnStyle").click(function (event) {
    $('#btnStyle').toggleClass('changed_css');
    if ($('#btnStyle').hasClass('changed_css')) {
        $('#btnStyle').html('Восстановить стиль');
        changeStyle();
    } else {
        $('#btnStyle').html('Изменить стиль');
        restoreStyle();
    }
});

function changeStyle()
{
   $.injectCSS({
      '.ui-widget-header' : {
         'border': '1px solid #dddddd',
         'background': '#e949e9',
         'color': '#333333'
      },
      '.ui-widget-content' : {
         'background': '#ea4eea',
         'color': '#33f3f3'
      },
      '.ui-state-default a,                        \
       .ui-state-default a:link,                   \
       .ui-state-default a:visited,                \
       a.ui-button,a:link.ui-button,               \
       a:visited.ui-button,                        \
       .ui-button' : {
         'color' : '#45e2e9'
      },
      '.ui-state-default,                          \
       .ui-widget-content .ui-state-default,       \
       .ui-widget-header .ui-state-default' : {
         'border': '1px solid #c5c5c5',
         'background': '#b6b6b6',   
         'font-weight': 'normal',
         'color': '#454545'
      },
      '.ui-state-active,                           \
       .ui-widget-content .ui-state-active,        \
       .ui-widget-header .ui-state-active,         \
       a.ui-button:active,                         \
       .ui-button:active,                          \
       .ui-button.ui-state-active:hover' : {
         'border': '1px solid #003eff',
         'background': '#bb7fff',
         'font-weight': 'normal',
         'color': '#ffffff'
      }
   });
   $("#accordion").accordion("option", "icons", {
                  "header": "ui-icon-plus", 
                  "activeHeader": "ui-icon-minus"
                  });
}
function restoreStyle()
{
   $.injectCSS({
      '.ui-widget-header' : {
         'border': '1px solid #dddddd',
         'background': '#e9e9e9',
         'color': '#333333'
      },
      '.ui-widget-content' : {
         'background': '#ffffff',
         'color': '#000'
      },
      '.ui-state-default a,                       \
       .ui-state-default a:link,                  \
       .ui-state-default a:visited,               \
       a.ui-button,a:link.ui-button,              \
       a:visited.ui-button,                       \
       .ui-button' : {
         'color' : '#454545'
      },
      '.ui-state-default,
       .ui-widget-content .ui-state-default,      \
       .ui-widget-header .ui-state-default,       \
       .ui-button,                                \
       html .ui-button.ui-state-disabled:hover,   \
       html .ui-button.ui-state-disabled:active' : {
         'border': '1px solid #d3d3d3',
         'background': '#eee url("a.png") 50% 50% repeat-x',
         'font-weight': 'normal',
         'color': '#555555'
      },
      '.ui-state-active,                          \
       .ui-widget-content .ui-state-active,       \
       .ui-widget-header .ui-state-active,        \
       a.ui-button:active,                        \
       .ui-button:active,                         \
       .ui-button.ui-state-active:hover' : {
         'border': '1px solid #aaaaaa',
         'background': '#ccc url("b.png") 50% 50% repeat-x',
         'font-weight': 'normal',
         'color': '#212121'
      }
   });
   $("#accordion").accordion("option", "icons", {
                  "header": "ui-icon-triangle-1-e", 
                  "activeHeader": "ui-icon-triangle-1-s"
                  });
}
</script>

active
определяет активность вкладки. Опция может быть как логической, так и целочисленной :

Boolean: при значении false сворачиваются все вкладки. Логическое значение опции active будет функционировать, если установлена опция collapsible=true.
Integer: индекс активной вкладки. При негативном значении выполняется переход на вкладку, предшествующую активной.


// Создание accordion с активностью 2-ой вкладки
$(".accord").accordion({
    active: 2
});

// Getter
let active = $(".accord").accordion("option", "active");
 
// Setter
$(".accord").accordion("option", "active", 2);

animate
определяет анимацию переключения вкладок. Тип опции может быть :

Boolean: при значении false анимация блокируется;

Integer: время переключения вкладок в милисекундах. Значение по умолчанию easing;

String: наименование easing используется по умолчанию;
Object: объект включает свойства easing и duration для конфигурации анимации.

// Создание accordion
$(".accord").accordion({
    animate: 200
});

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

collapsible
определяет возможность сворачивания всех вкладок. По умолчанию значение false, при котором одна из вкладок должна быть всегда раскрытой.


// Создание accordion
$(".accord").accordion({
    collapsible: true
});

// Getter
let collaps=$(".accord").accordion("option","collapsible");
 
// Setter
$(".accord").accordion( "option", "collapsible", true );

disabled
блокирование переключения вкладок. По умолчанию значение false, не блокированы.


// Создание accordion
$(".accord").accordion({
    disabled: true
});

// Getter
let disabled=$(".accord").accordion("option","disabled");
 
// Setter
$(".accord").accordion("option", "disabled", true);

event
определяет событие реагирования заголовка для переключения вкладок. По умолчанию значение click.


// Создание accordion
$(".accord").accordion({
    event: "mouseover"
});

// Getter
let event=$(".accord").accordion("option","event");
 
// Setter
$(".accord").accordion("option", "event", "mouseover");

header
определяет заголовок вкладки виджета. Описание и пример использования данной опции представлен выше.

heightStyle
определяет высоту панелей для вкладок. По умолчанию используется "auto". Возможные значения :

"auto": все панели имеют одинаковый размер, равный максимальной высоте одной из панелей;
"fill": развернуть на возможную высоту, определенную высотой родительского компонента;
"content": высота каждой панели определяется её содержимым.


// Создание accordion
$(".accord").accordion({
    heightStyle: "fill"
});

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

icons
изображение иконок. По умолчанию используются :

"header": "ui-icon-triangle-1-e";
"activeHeader": "ui-icon-triangle-1-s".


// Создание accordion
$(".accord").accordion({
  icons: {"header": "ui-icon-plus", 
          "activeHeader": "ui-icon-minus"}
});

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

Методы управления вкладками

disable()
enable()
option(optionName)
option()
option(optionName, value)
option(literal)
refresh()
widget()

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


// Создание accordion
$(".accord").accordion();
// Блокирование доступа
$(".accord").accordion("disable");

enable()
разблокирование доступа к виджету.


// Разблокирование доступа
$(".accord").accordion("enable");

option(optionName)
чтение опции виджета.


let disabled = $(".accord").accordion("option","disabled");

option()
чтение опций виджета в виде пар значений key/value.


let options = $(".accord").accordion("option");

option(optionName, value)
определение значения опции виджета.


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

option(literal)
определение значений опций виджета согласно описанию литерала объекта.


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

refresh()
обновить виджет после добавления или удаления заголовков/панелей непосредственно в DOM-структуре и пересчитать высоту панелей виджета согласно значению опции heightStyle.


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

widget()
получение объекта jQuery, определяющий виджет accordion. В представленном примере блокируется доступ к виджету через объект jQuery :

// Получение виджета accordion в виде объекта jQuery
let accord = $(".accord").accordion("widget");
// Блокирование доступа к объекту
if (accord != null)
    accord.accordion("disable");

События

activate(event, ui)
beforeActivate(event, ui)
create(event, ui)

Виджет accordion реагирует на стандартные события DOM : blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup.

activate(event, ui)
возникает после активации панели (вкладки). Если используется анимация, то событие возникает после анимации.

event – стандартные события DOM;
ui – тип Object :
- newHeader : активируемый заголовок;
- oldHeader : деактивируемый заголовок;
- newPanel : активируемая панель;
- oldPanel : деактивируемая панель.

Ниже представлен пример инициализации виджета accordion, у которого будет вызываться callback-функция после активации вкладки :

$( ".accord" ).accordion({
    activate: function(event, ui) {
        // ... реализация
    }
});

beforeActivate(event, ui)
возникает непосредственно перед активацией панели (вкладки).

event – стандартные события DOM;
ui – тип Object :
- newHeader : активируемый заголовок;
- oldHeader : деактивируемый заголовок;
- newPanel : активируемая панель;
- oldPanel : деактивируемая панель.

Ниже представлен пример инициализации виджета accordion, у которого будет вызываться callback-функция перед активацией вкладки :

$( ".accord" ).accordion({
    beforeActivate: function(event, ui) {
        // ... реализация
    }
});

create(event, ui)
возникает после создания виджета.

event – стандартные события DOM;
ui – тип Object :
- header : активный заголовок;
- panel : активная панель.

Ниже представлен пример инициализации accordion, у которого будет вызвана callback-функция после создания виджета :

$( ".accord" ).accordion({
    create: function(event, ui) {
        // ... реализация
    }
});

Связанные страницы

Описание библиотеки jQuery
Виджет вкладок tabs