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

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

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

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

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

  • selected — индекс вкладки, которая будет открыта изначально. Нумерация начинается с нуля. Если при создании компонента указать значение -1, то изначально все вкладки будут закрыты. По умолчанию отображается первая вкладка. В качестве примера отобразим содержимое третьей вкладки.
$('#tabs').tabs({ selected: 2 });
  • event — событие, по которому происходит переключение вкладок. По умолчанию используется событие click. Если указать событие mouseover, то вкладка будет открываться при наведении курсора.
  • collapsible — если указано значение true, то открытая вкладка будет закрыта при щелчке на заголовке. При использовании этой опции можно закрыть все вкладки. Значение по умолчанию — false.
  • disabled — массив с индексами вкладок, которые должны быть недоступными изначально. Нумерация вкладок начинается с нуля. Если необходимо сделать неактивной первую вкладку, то с помощью опции selected следует указать индекс другой вкладки.
  • fx — позволяет задать анимационный эффект при отображении и сокрытии содержимого вкладок.
$('#tabs').tabs({ fx: { opacity: "toggle" } });
  • cookie — позволяет сохранить индекс последней выбранной вкладки в cookies. Для использования опции необходимо подключение модуля Cookie (расположен в папке development-bundle\external\cookie). Если индекс вкладки сохранен, то она будет открыта при следующей загрузке страницы, при условии что индекс не указан явно в опции selected. В качестве значения указывается объект с парами "опция/значение". Вот пример сохранения cookies на семь дней.
$('#tabs').tabs({ cookie: { expires: 7 } });
  • ajaxOptions — объект с опциями AJAX-запроса. Значение по умолчанию — null.
  • cache — управление заполнением вкладок с помощью AJAX-запроса. При значении true повторный щелчок на заголовке вкладки не будет приводить к загрузке данных с сервера. Значение по умолчанию — false.
  • spinner — HTML-код, который отображается в заголовке вкладки во время загрузки данных с помощью AJAX-запроса. Если в качестве значения опции указать пустую строку, то текст заголовка меняться не будет. Значение по умолчанию — <em>Loading&#8230;</em>.
  • tabTemplate — HTML-шаблон для создания заголовка новых вкладок. Значение по умолчанию:
<li><a href="#{href}"><span>#{label}</span></a></li>
  • panelTemplate — HTML-шаблон для создания содержимого новых вкладок. Значение по умолчанию — <div></div>.

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

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

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

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

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

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

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

  • add — добавляет новую вкладку. Формат метода:
tabs("add", <URL-адрес или ID>, <Текст заголовка>[, <Индекс>])

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

$("#tabs").tabs("add", "ajax1.php", "Новая вкладка", 0);
  • remove — удаляет вкладку. Формат метода:
tabs("remove", <Индекс>)

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

$("#tabs").tabs("remove", 0);
  • length — возвращает количество вкладок.
alert($("#tabs").tabs("length"));
  • select — позволяет программно выбрать вкладку. Формат метода:
tabs("select", <Индекс или ID>)

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

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

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

$("#tabs").tabs("url", 1, "ajax2.php");
  • load — перезагружает содержимое вкладки с помощью AJAX-запроса. Формат метода:
tabs("load", <Индекс вкладки>)
  • rotate — позволяет установить автоматический перебор всех вкладок в цикле. Формат метода:
tabs("rotate", <Время>[, <Действие при выборе вкладки>])

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

$("#tabs").tabs("rotate", 5000);
  • abort — прерывает выполнение всех AJAX-запросов и анимаций.
  • disable — временно запрещает использование компонента.
  • enable — разрешает использование компонента, если ранее оно было запрещено с помощью метода disable.
  • disable — делает указанную вкладку недоступной. Обратите внимание на то, что текущая вкладка не может быть недоступной. Формат метода:
tabs("disable", <Индекс вкладки>)

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

$("#tabs").data("disabled.tabs", [1, 2]);
  • enable — делает недоступную вкладку доступной. Формат метода:
tabs("enable", <Индекс вкладки>)

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

$("#tabs").data("disabled.tabs", []);
  • destroy — удаляет компонент и возвращает все элементы в первоначальное состояние.

Пример заполнения вкладок с помощью 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()).

  • select (tabsselect) — при выборе неактивной вкладки. Если внутри функции обратного вызова вернуть значение false, то вкладка выбрана не будет.
  • load (tabsload) — после загрузки данных с сервера.
  • show (tabsshow) — при отображении содержимого вкладки.
  • disable (tabsdisable) — когда вкладка становится недоступной.
  • enable (tabsenable) — когда недоступная вкладка становится доступной.
  • add (tabsadd) — при добавлении новой вкладки.
  • remove (tabsremove) — при удалении вкладки.

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

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

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

  • index — индекс вкладки;
  • tab — ссылка на заголовок вкладки;
  • panel — ссылка на содержимое вкладки.

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

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

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

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