Модуль UI Accordion — компонент Аккордеон

Модуль UI Accordion позволяет создать компонент с несколькими вкладками. Изначально отображается содержимое только одной вкладки, а у остальных доступны только заголовки. После щелчка мышью на заголовке вкладки она открывается, а остальные сворачиваются.

Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Accordion, 1.7.2, выбираем тему из списка (например, Start), а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

  • jquery-ui-1.7.2.custom.css и каталог images (папка css\start);
  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js).

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

Листинг 12.14. Компонент Аккордеон с параметрами по умолчанию

<!doctype html>
<html>
<head>
<title>Модуль jQuery UI Accordion</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#accordion").accordion({
      header: "h3"
   });
});
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="accordion">
<h3><a href="#">Вкладка 1</a></h3>
<div>Содержимое вкладки 1</div>
<h3><a href="#">Вкладка 2</a></h3>
<div>Содержимое вкладки 2</div>
<h3><a href="#">Вкладка 3</a></h3>
<div>Содержимое вкладки 3</div>
</div>
</body>
</html>

Результат выполнения листинга показан на рис. 12.2.

pic12_2.png

Рис. 12.2. Компонент Аккордеон с параметрами по умолчанию

Шаблоном для компонента является элемент DIV:

<div id="accordion">
<h3><a href="#">Вкладка 1</a></h3>
<div>Содержимое вкладки 1</div>
...
<h3><a href="#">Вкладка N</a></h3>
<div>Содержимое вкладки N</div>
</div>

Текст заголовка вкладки должен быть расположен внутри элемента A, а содержимое вкладки — внутри элемента DIV. Чтобы заголовок занимал всю доступную ширину окна, мы разместили заголовок внутри элемента H3. После загрузки по умолчанию отображается содержимое только первой вкладки, а высота равна высоте вкладки с максимальным содержимым. Щелкнув мышью на заголовке, можно отобразить соответствующую вкладку, а остальные будут скрыты.

Для создания компонента и управления им предназначен метод accordion(). Форматы метода:

accordion([<Объект с опциями>])
accordion(<Параметр>[, <Название опции>[, <Значение опции>]])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

  • active — индекс вкладки, которая будет открыта изначально. Нумерация начинается с нуля. Если при создании компонента указать значение false, то изначально все вкладки будут закрыты. По умолчанию отображается первая вкладка.
  • collapsible — если указано значение true, то открытая вкладка будет закрыта при щелчке на заголовке. При использовании этой опции можно закрыть все вкладки. Значение по умолчанию — false.
  • header — позволяет задать элемент, который является заголовком вкладки.
  • event — событие, по которому происходит переключение вкладок. По умолчанию используется событие click. Если указать событие mouseover, то вкладка будет открываться при наведении курсора.
  • icons — позволяет задать значки, которые используются в заголовках. Указывается объект с двумя свойствами:
  • header — значок в заголовке закрытой вкладки;
  • headerSelected — значок в заголовке открытой вкладки.

В качестве значения свойств указывается стилевой класс значка в jQuery UI CSS Framework.

icons: {
   header: "ui-icon-arrow-1-e",
   headerSelected: "ui-icon-arrow-1-s"
}
  • autoHeight — если указано значение false, то высота вкладки будет определяться внутренним содержимым. По умолчанию установлено значение true. Высота всех вкладок при этом значении определяется по вкладке с максимальным содержимым.
  • fillSpace — если установлено значение true, то компонент будет занимать всю область, определяемую родительским элементом. Если содержимое вкладки не помещается, то будут выведены полосы прокрутки; значение по умолчанию — false.
  • animated — позволяет указать эффект при открытии вкладки. Если указать значение false, то анимация будет отключена; значение по умолчанию — slide.
  • clearStyle — если установлено значение true, то высота вкладки будет вычисляться при каждом открытии. Это позволяет работать с динамически изменяемым содержимым; значение по умолчанию — false.
  • navigation — если установлено значение true, то все ссылки внутри компонента будут сравниваться с текущим URL-адресом документа. В случае нахождения совпадения, вкладка, которая содержит ссылку с URL-адресом, равным URL-адресу документа, будет открыта. Такое поведение компонента позволяет создать панель навигации. Однако следует следить за тем, чтобы внутри разных вкладок не было ссылок с одинаковым URL-адресом. В противном случае поведение компонента становится непредсказуемым. Для реализации панели навигации в качестве содержимого вкладки используется разметка в виде списка.
<div id="accordion">
<h3><a href="#">Раздел 1</a></h3>
<ul>
<li><a href="link1.html">Ссылка 1</a></li>
</ul>
<h3><a href="#">Раздел 2</a></h3>
<ul>
<li><a href="link2.html">Ссылка 2</a></li>
</ul>
</div>

Значение по умолчанию — false.

  • navigationFilter — позволяет задать пользовательскую функцию сравнения при значении опции navigation, равном true. На каждой итерации внутри функции обратного вызова доступен указатель (this) на текущую ссылку. Если внутри функции вернуть значение true, то вкладка, содержащая ссылку, будет открыта. По умолчанию все ссылки внутри компонента сравниваются с текущим URL-адресом документа.
navigationFilter: function() {
   return this.href.toLowerCase()==
          location.href.toLowerCase();
}

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

Листинг 12.15. Панель навигации, созданная с помощью модуля UI Accordion

<!doctype html>
<html>
<head>
<title>Панель навигации</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#accordion").accordion({
      event: "mouseover",
      header: "h3",
      icons: {
         header: "ui-icon-arrow-1-e",
         headerSelected: "ui-icon-arrow-1-s" 
      },
      navigation: true,
      fillSpace: true
   });
   $("#btn1").click(function() {
      $("#div2").text($("#div1").html());
   });
});
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<h2>Панель навигации</h2>
<table border="0"><tr><td valign="top">
<div style="width:150px; height:250px;" id="div1">
<div id="accordion">
<h3><a href="#">Раздел 1</a></h3>
<ul>
<li><a href="?1">Ссылка 1</a></li>
</ul>
<h3><a href="#">Раздел 2</a></h3>
<ul>
<li><a href="?2">Ссылка 2</a></li>
</ul>
<h3><a href="#">Раздел  3</a></h3>
<ul>
<li><a href="?3">Ссылка 3</a></li>
</ul>
</div>
</div>
</td><td valign="top">
Перейдите по этим ссылкам, чтобы увидеть эффект<br>
<a href="?1">Ссылка на раздел 1</a><br>
<a href="?2">Ссылка на раздел 2</a><br>
<a href="?3">Ссылка на раздел 3</a><br><br>
<input type="button" value="Показать исходный код" id="btn1">
<div id="div2"></div>
</td></tr></table>
</body>
</html>

Результат выполнения листинга показан на рис. 12.3.

pic12_3.png

Рис. 12.3. Результат выполнения листинга 12.15

Первый формат метода accordion() позволяет задать значения при создании компонента. Чтобы изменить или получить значения опций уже после создания, необходимо использовать второй формат метода accordion(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#accordion").accordion("option", "icons", {
   header: "ui-icon-arrow-1-e",
   headerSelected: "ui-icon-arrow-1-s" 
});

Если необходимо получить значение опции, то третий параметр указывать не нужно. В качестве примера получим значение опции animated.

alert($("#accordion").accordion("option", "animated"));

Второй формат метода accordion() позволяет также управлять созданным компонентом. Для этого в первом параметре указываются следующие значения.

  • activate — открывает указанную вкладку. Во втором параметре указывается индекс вкладки или селектор. Нумерация вкладок начинается с нуля. Если указать значение –1, то все вкладки будут закрыты. В качестве примера откроем вторую вкладку.
$("#accordion").accordion("activate", 1);
  • destroy — удаляет компонент и возвращает все элементы в первоначальное состояние.
  • disable — временно запрещает использование компонента.
  • enable — разрешает использование компонента, если ранее оно было запрещено с помощью значения disable.

Обработать события, происходящие с компонентом, можно двумя способами.

accordion({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> могут быть указаны следующие события (в скобках указано значение для метода bind()).

  • changestart (accordionchangestart) — наступает в начале смены вкладки.
  • change (accordionchange) — наступает после того, как сменилась вкладка (после окончания анимации).

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Через параметр <Объект UI> доступны следующие объекты jQuery:

  • newHeader — ссылка на заголовок открытой вкладки;
  • oldHeader — ссылка на заголовок закрытой вкладки;
  • newContent — ссылка на содержимое открытой вкладки;
  • oldContent — ссылка на содержимое закрытой вкладки.

Пример обработки различных событий приведен в листинге 12.16.

Листинг 12.16. Модуль UI Accordion, обработка событий

<!doctype html>
<html>
<head>
<title>Модуль UI Accordion, обработка событий</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#accordion").accordion({
      header: "h3",
      changestart: function() {
         $("#div1").append("Событие changestart<br>");
      },
      change: function(e, ui) {
         $("#div1").append("Событие change<br>");
         ui.newHeader.find("a").html("Открытая вкладка");
         ui.oldHeader.find("a").html("Закрытая вкладка");
      }
   });
   $("#accordion").bind("accordionchangestart", function() {
      $("#div1").append("Событие accordionchangestart<br>");
   }).bind("accordionchange", function() {
      $("#div1").append("Событие accordionchange<br>");
   });
});
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="accordion">
<h3><a href="#">Вкладка 1</a></h3>
<div>Содержимое вкладки 1</div>
<h3><a href="#">Вкладка 2</a></h3>
<div>Содержимое вкладки 2</div>
<h3><a href="#">Вкладка 3</a></h3>
<div>Содержимое вкладки 3</div>
</div>
<div id="div1"></div>
</body>
</html>

Библиотека jQuery UI
Библиотека jQuery UI

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе