Модуль UI Tabs — панель с вкладками

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

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

Листинг 12.17. Панель с вкладками, параметры по умолчанию

<!doctype html>
<html>
<head>
<title>Панель с вкладками</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/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() {
   $('#tabs').tabs();
});
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span>Вкладка 1</span></a></li>
<li><a href="#tabs2"><span>Вкладка 2</span></a></li>
<li><a href="#tabs3"><span>Вкладка 3</span></a></li>
</ul>
<div id="tabs1"><p>Содержимое вкладки 1</p></div>
<div id="tabs2"><p>Содержимое вкладки 2</p></div>
<div id="tabs3"><p>Содержимое вкладки 3</p></div>
</div>
</body>
</html>

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

pic12_4.png

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

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

<div id="tabs">
<ul>
<li><a href="#tabs1"><span>Вкладка 1</span></a></li>
<li><a href="#tabs2"><span>Вкладка 2</span></a></li>
<li><a href="#tabs3"><span>Вкладка 3</span></a></li>
</ul>
<div id="tabs1"><p>Содержимое вкладки 1</p></div>
<div id="tabs2"><p>Содержимое вкладки 2</p></div>
<div id="tabs3"><p>Содержимое вкладки 3</p></div>
</div>

Заголовки вкладок оформляются в виде списка. Внутри пункта списка расположен элемент A, в параметре href которого указывается идентификатор элемента DIV, в котором находится содержимое вкладки. После списка должны быть расположены элементы DIV с содержимым вкладок.

Модуль UI Tabs позволяет также заполнять содержимое вкладок с помощью AJAX-запроса. В этом случае в параметре href тегов <a> указывается URL-адрес документа. Шаблон такой панели будет выглядеть следующим образом.

<div id="tabs">
<ul>
<li><a href="doc1.html"><span>Вкладка 1</span></a></li>
<li><a href="doc2.html"><span>Вкладка 2</span></a></li>
</ul>
</div>

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

tabs([<Объект с опциями>])

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

$('#tabs').tabs({ selected: 2 });
$('#tabs').tabs({ fx: { opacity: "toggle" } });
$('#tabs').tabs({ cookie: { expires: 7 } });
<li><a href="#{href}"><span>#{label}</span></a></li>

Первый формат метода tabs() позволяет задать значения при создании панели. Чтобы изменить или получить значения опций уже после создания, необходимо использовать следующий формат метода tabs().

tabs("option", <Название опции>[, <Значение опции>])

В первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#tabs").tabs("option", "spinner", "Загрузка...");

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

alert($("#tabs").tabs("option", "spinner"));

Для управления созданной панелью предназначены следующие методы.

tabs("add", <URL-адрес или ID>, <Текст заголовка>[, <Индекс>])

Если последний параметр не указан, то вкладка будет добавлена после всех вкладок. Нумерация начинается с нуля. Добавим вкладку в самое начало.

$("#tabs").tabs("add", "ajax1.php", "Новая вкладка", 0);
tabs("remove", <Индекс>)

Удалим первую вкладку.

$("#tabs").tabs("remove", 0);
alert($("#tabs").tabs("length"));
tabs("select", <Индекс или ID>)

Создадим новую вкладку, а затем сделаем ее активной.

var i = $("#tabs").tabs("length");
$("#tabs").tabs("add", "ajax1.php", "Новая вкладка", i)
          .tabs("select", i);
tabs("url", <Индекс вкладки>, <Новый URL-адрес>)

Рассмотрим пример.

$("#tabs").tabs("url", 1, "ajax2.php");
tabs("load", <Индекс вкладки>)
tabs("rotate", <Время>[, <Действие при выборе вкладки>])

Во втором параметре указывается количество миллисекунд, в течение которых вкладка будет открыта. Если указать значение 0 или null, то перебор вкладок будет остановлен. Если в третьем параметре указать значение true, то при выборе вкладки пользователем перебор вкладок будет продолжен. По умолчанию параметр имеет значение false.

$("#tabs").tabs("rotate", 5000);
tabs("disable", <Индекс вкладки>)

Если необходимо сделать недоступными сразу несколько вкладок, то можно воспользоваться методом data(). Сделаем вторую и третью вкладки недоступными.

$("#tabs").data("disabled.tabs", [1, 2]);
tabs("enable", <Индекс вкладки>)

Если необходимо сделать все вкладки доступными, то можно воспользоваться методом data().

$("#tabs").data("disabled.tabs", []);

Пример заполнения вкладок с помощью AJAX-запроса приведен в листинге 12.18.

Листинг 12.18. Заполнение вкладок с помощью AJAX

<!doctype html>
<html>
<head>
<title>Заполнение вкладок с помощью AJAX</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/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 src="development-bundle/external/cookie/jquery.cookie.min.js">
</script>
<script>
$(document).ready(function() {
   $("#tabs").tabs({
      cookie: { expires: 7 }, // Запоминаем номер открытой вкладки
      ajaxOptions: { cache: false }, // Получаем последние данные
      cache: true, // Делаем только один запрос на сервер
      spinner: "Загрузка...",
      disabled: [2] // Делаем третью вкладку недоступной
   });
   $("#btn1").click(function() {
      $("#tabs").tabs("disable", 1);
   });
   $("#btn2").click(function() {
      $("#tabs").data("disabled.tabs", []);
   });
   $("#btn3").click(function() {
      $("#tabs").tabs("add", "ajax3.php", "Новая вкладка");
   });
});
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span>Вкладка 1</span></a></li>
<li><a href="ajax1.php"><span>Вкладка 2</span></a></li>
<li><a href="ajax2.php"><span>Вкладка 3</span></a></li>
</ul>
<div id="tabs1"><p>Содержимое вкладки 1</p></div>
</div>
<input type="button" value="Сделать вторую вкладку недоступной"
       id="btn1">
<input type="button" value="Сделать все доступными" id="btn2">
<input type="button" value="Добавить вкладку" id="btn3">
</body>
</html>

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

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

или

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

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

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

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

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

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

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

<!doctype html>
<html>
<head>
<title>Модуль UI Tabs, обработка событий</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/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() {
   $("#tabs").tabs({
      event: "mouseover", // Выбор вкладки при наведении курсора
      selected: 1, // Делаем вторую вкладку активной
      cache: true, // Делаем только один запрос на сервер
      spinner: "Загрузка...",
      select: function(e, ui) {
         // Делаем недоступной первую вкладку
         if (ui.index == 0) return false;
      },
      load: function() { // Событие после загрузки данных
         $("#div1").append("Событие load<br>");
      },
      show: function(e, ui) { // Событие при отображении вкладки
         var msg = "Событие show<br>";
         msg += "Индекс вкладки: " + ui.index + "<br>";
         msg += "Текст заголовка: " + ui.tab.innerHTML + "<br>";
         msg += "Текст содержимого: " + ui.panel.innerHTML + "<br>";
         $("#div1").append(msg);
      }
   });
});
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span>Вкладка 1</span></a></li>
<li><a href="#tabs2"><span>Вкладка 2</span></a></li>
<li><a href="ajax1.php"><span>Вкладка 3</span></a></li>
</ul>
<div id="tabs1"><p>Содержимое вкладки 1</p></div>
<div id="tabs2"><p>Содержимое вкладки 2</p></div>
</div>
<div id="div1"></div>
</body>
</html>
Предыдущая статья Все статьи Следующая статья