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

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

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

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера выведем компонент с параметрами по умолчанию (листинг 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(<Параметр>[, <Название опции>[, <Значение опции>]])

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

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

icons: {
   header: "ui-icon-arrow-1-e",
   headerSelected: "ui-icon-arrow-1-s"
}
<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: 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() позволяет также управлять созданным компонентом. Для этого в первом параметре указываются следующие значения.

$("#accordion").accordion("activate", 1);

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

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

или

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

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

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

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

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

Пример обработки различных событий приведен в листинге 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>
Предыдущая статья Все статьи Следующая статья