Необходимо применить на веб-странице виджет Tabs.

Опубликовал: admin Monday, June 3, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Виджет Tabs помогает разделить информационное наполнение между несколькими вкладками. Это может быть полезно при дефиците свободного места на вебстранице. Информационное наполнение вкладок можно загрузить с помощью AJAX-запроса. Внешний вид виджета Tabs в одном из вариантов оформления представлен на рис. 17.6.

Рис. 17.6. Виджет Tabs в одном из вариантов оформления

Решение

Решение этой задачи с использованием темы оформления "le-frog" приведено в листинге 17.6.1.

Листинг 1 7 .6 .1 . Использование виджета Tabs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-6-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<p>Tab 1 content</p>
<p>Tab 2 content</p>
<p>Tab 3 content</p>
<button id="addTab">Add</button>
<button id="removeTab">Remove</button>
<button id="enableTab">Enable</button>
<button id="disableTab">Disable</button>
<button id="startRotate">Start Rotate</button>
<button id="stopRotate">Stop Rotate</button>
<button id="getCookie">Get Cookie</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-17-6-1</title>

$(function(){

$("#tabs").tabs();

});

</script>

</head>

<body>

<ul>

<li><a href="#tabs-1">Nunc tincidunt</a></li>

<li><a href="#tabs-2">Proin dolor</a></li>

<li><a href="#tabs-3">Aenean lacinia</a></li>

</ul>

<p>Tab 1 content</p>

<p>Tab 2 content</p>

<p>Tab 3 content</p>

<button id="removeTab">Remove</button>

<button id="enableTab">Enable</button>

<button id="disableTab">Disable</button>

<button id="startRotate">Start Rotate</button>

<button id="stopRotate">Stop Rotate</button>

<button id="getCookie">Get Cookie</button>

</body>

</html>

Обсуждение

Виджет Tabs требует определенной HTML-разметки (см. листинг 17.6.1). Ярлыками вкладок являются элементы li, в атрибутах href которых содержатся идентификаторы соответствующих им элементов div, представляющие собой область информационного наполнения вкладки. Внутри элементов div содержимое может быть практически любым.

Итак, сначала мы подключили файл стилей css/le-frog/jquery-ui-1.8.9.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки — js/jquery-1.4.4.min.js и файл js/jquery-ui-1.8.9.custom.min.js, в котором объединена функциональность ядра UI и виджета Tabs. Файл js/jquery.cookie.min.js используется при необходимости работы с cookie. За связь виджета с HTMLразметкой отвечает фрагмент кода, приведенный в листинге 17.6.2.

Листинг 1 7 .6 .2 . Использование виджета Tabs

[code language=”javascript”]

Виджет Tabs способен принимать много различных опций, но пока в листинге 17.6.2 приведен фрагмент кода, который реализует виджет с настройками по умолчанию.

В примере из листинга 17.6.3 попробуем передать виджету некоторые опции. Мы приведем только интересующий нас фрагмент кода, поскольку и подключаемые файлы, и HTML-разметка остаются без изменений.

Листинг 1 7 .6 .3 . Использование виджета Tabs

[code language=”javascript”]

В примере из листинга 17.6.3 мы заставили виджет Tabs переключать вкладки по событию mouseover (взамен установленного по умолчанию click) и открывать при инициализации третью вкладку (отсчет ведется от нуля).

Приведем еще пару интересных примеров (листинги 17.6.4 и 17.6.5).

Листинг 1 7 .6 .4 . Использование виджета Tabs

[code language=”javascript”]

В примере из листинга 17.6.4 с помощью опции fx создаем анимационный эффект при переключении вкладок.

А пример из листинга 17.6.5 демонстрирует приемы использования cookie для запоминания последней открытой вкладки для того, чтобы впоследствии открыть ее при инициализации.

Листинг 1 7 .6 .5 . Использование виджета Tabs

[code language=”javascript”]

В примере из листинга 17.6.5 мы установили cookie с именем startTab сроком на семь дней. Щелчок по кнопке с идентификатором getCookie приведет к тому, что в окне предупреждения мы увидим имя установленной cookie и срок, на который она была установлена. Нужно отметить, что для реализации этой возможности необходимо подключать дополнительный файл плагина jQuery Cookie (см. главу 16).

Описания всех возможных опций приведены в табл. 17.16.

Таблица 17.16. Опции виджета Tabs

Опция	Описание
disabled	Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность виджета Tabs будет недоступна, однако ее можно включить впоследствии, например, при выполнении какого-либо условия

Таблица 17.16 (окончание)

Опция	Описание
ajaxOptions	Опции AJAX-запроса (подробная информация об опциях, используемых для управления AJAX-запросами, приведена в главе 9), которые служат для загрузки удаленного содержимого в область информационного наполнения. Значение по умолчанию — null
cache	Опция определяет, кэшировать или нет информационное наполнение вкладки, загружаемое с помощью AJAX-запросов, т. е. загрузить содержимое только однажды или загружать каждый раз, когда совершен щелчок на ярлыке вкладки. Значение по умолчанию — false (кэширование не производится). Обратите внимание — чтобы воспрепятствовать фактическому кэшированию данных браузером, вы должны дополнительно обеспечить значение false в опциях самого AJAX-запроса
collapsible	Значение по умолчанию — false. Если передать в этой опции значение true, то каждый следующий щелчок на ярлыке вкладки будет скрывать и открывать область информационного наполнения
cookie	Запоминает последнюю выбранную вкладку в cookie. В дальнейшем служит для определения вкладки, открываемой по умолчанию (если не используется опция selected). Требует подключения плагина cookie (см. главу 16). Возможно присвоение имени cookie через опцию name
disabled	Массив, содержащий индексы вкладок (отсчет ведется от нуля), которые должны быть недоступными при инициализации виджета. Например, disabled: [1, 2] сделает недоступными вторую и третью вкладки
event	Тип события, которое используется для переключения вкладок. Значение по умолчанию — ‘click’. Второе возможное значение — ‘mouseover’
fx	Устанавливает анимационные эффекты при открытии/закрытии вкладок. Например: fx: { opacity: "toggle", duration: "slow" }
idPrefix	Значение по умолчанию — строка ‘ui-tabs-‘. Используется для генерации идентификатора при создании дополнительных вкладок после инициализации виджета, для вкладок, в которые содержимое загружается с помощью AJAX-запросов
panelTemplate	HTML-шаблон, из которого создается новая область информационного наполнения вкладки при ее создании с помощью метода add или "на лету" посредством AJAX-запроса. Значение по умолчанию — ‘<div></div>’
selected	Индекс вкладки (отсчет ведется от нуля), которая должна быть открыта при инициализации виджета. Значение по умолчанию — 0, т. е. открывается первая вкладка. Чтобы сделать невыбранными все вкладки, нужно задать значение -1
spinner	HTML-код, указанный в этой строке, отображается на ярлыке вкладки во время загрузки удаленного содержимого в область информационного наполнения. Если передать пустую строку, эта возможность будет деактивирована. По умолчанию используется <em>Loading</em>
tabTemplate	HTML-шаблон, из которого создаются новые ярлыки вкладок при их создании методом add. #{href} and #{label} заменяются на URL и название вкладки, переданными в аргументах метода add. По умолчанию имеет значение ‘<li><a href="#{href}"><span>#{label}</span></a></li>’

Точно так же, как и другие виджеты, виджет Tabs умеет реагировать на разнообразные события (листинг 17.6.6).

Листинг 1 7 .6 .6 . Использование виджета Tabs

[code language=”javascript”]

В примере из листинга 17.6.6 мы определили в опции select callback-функцию, которая будет вызываться при наступлении события tabsselect, т. е. в тот момент, когда был совершен щелчок по ярлыку вкладки. Callback-функция принимает два аргумента: первый — объект event, второй — специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить довольно полезную информацию (мы выводим ее в окне предупреждения):

❒ ui.tab — содержит полный URL активизированной в настоящий момент вкладки;

❒ ui.panel — элемент, представляющий информационное наполнение активизированной вкладки;

❒ ui.index — индекс активизированной вкладки (отсчет ведется от нуля).

В табл. 17.17 приведены описания событий виджета Tabs и названия опций, в которых можно определить callback-функции, вызываемые при наступлении события.

Таблица 17.17. События виджета Tabs

Опция	Событие	Описание
create	tabscreate	Наступает в момент инициализации
select	tabsselect	Происходит в момент щелчка по ярлыку вкладки (при наведении указателя мыши на вкладку, если используется опция event: ‘mouseover’). При щелчке на ярлыке активной вкладки ничего не происходит
load	tabsload	Происходит, когда в область информационного наполнения вкладки было загружено содержимое из внешнего файла
show	tabsshow	Наступает в момент отображения содержимого вкладки

Таблица 17.17 (окончание)

Опция	Событие	Описание
add	tabsadd	Происходит каждый раз, когда добавлена новая вкладка
remove	tabsremove	Происходит каждый раз, когда удалена какая-либо вкладка
enable	tabsenable	Наступает в момент, когда ранее недоступная вкладка становится доступной
disable	tabsdisable	Наступает в момент, когда вкладка становится недоступной

Конечно же, виджет Tabs имеет и некоторые методы, позволяющие еще более расширить функциональность.

В листинге 17.6.7 мы перейдем к изучению методов виджета Tabs.

Листинг 1 7 .6 .7 . Использование виджета Tabs

[code language=”javascript”]

Подробно разберем пример, приведенный в листинге 17.6.7. Здесь нам пригодятся кнопки, которые мы до этого времени не задействовали. Для кнопки с идентифика-

тором Add определяем обработчик события click. При щелчке на этой кнопке будет вызвана callback-функция, которая применит к виджету метод add и добавит еще одну вкладку с идентификатором #tabs-4 и надписью на ярлыке — Tab4. Последний аргумент метода — индекс создаваемой вкладки. Поскольку отсчет ведется от нуля, число 3 означает, что создаваемая вкладка — четвертая по счету. Вторая строка добавит параграф p в область информационного наполнения вкладки. Подобным образом определим обработчик для кнопки Remove. Здесь мы используем метод remove, чтобы удалить ранее созданную вкладку с индексом 3. С кнопками Enable и Disable связаны обработчики, которые активируют и деактивируют третью по счету вкладку.

В листинге 17.6.8 приведен пример использования еще одного очень интересного метода — rotate.

Листинг 1 7 .6 .8 . Использование виджета Tabs

[code language=”javascript”]

В примере из листинга 17.6.8 при щелчке на кнопке с идентификатором Start Rotate будет вызван метод rotate, который заставит виджет самостоятельно переключать вкладки каждые три секунды. При щелчке на кнопке с идентификатором Stop Rotate автоматическое переключение вкладок будет остановлено.

В табл. 17.18 приведены описания всех доступных методов виджета Tabs.

Таблица 17.18. Методы виджета Tabs

Метод	Описание
destroy .tabs( ‘destroy’ )	Полностью удаляет всю функциональность виджета Tabs. Возвращает элементы в состояние, предшествующее инициализации
disable .tabs(‘disable’)	Временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable
enable .tabs(‘enable’)	Разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable

Таблица 17.18 (продолжение)

Метод

Описание

option

.tabs(‘option’, optionName, [value])

Устанавливает значение любой опции виджета после инициализации

option

.tabs(‘option’, optionName)

С помощью этого метода можно получить значение любой опции виджета после инициализации

widget

.tabs (‘widget’)

Обеспечивает доступ к объекту, который представляет собой элемент с функциональностью Tabs

add

.tabs(‘add’, url, label, [index])

Добавляет новую вкладку. Второй аргумент содержит либо идентификатор создаваемой вкладки, (см. требования к разметке), либо является полным URL (относительным или абсолютным, но без поддержки кроссдоменной загрузки) при создании вкладки с использованием AJAX. Третий аргумент — название вкладки, отображаемое на ее ярлыке. Четвертый — индекс создаваемой вкладки (позиции отсчитываются от нуля)

remove

.tabs(‘remove’, index)

Удаляет вкладку. Второй аргумент — индекс удаляемой вкладки (позиции отсчитываются от нуля)

enable

.tabs(‘enable’, index)

Делает доступной ранее недоступную вкладку. Чтобы сделать доступными одновременно несколько вкладок, укажите

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

disable

.tabs(‘disable’, index)

Делает вкладку недоступной. Активная вкладка не может быть сделана недоступной. Чтобы сделать недоступными одновременно несколько вкладок, укажите

$(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3]);

select

.tabs(‘select’, index)

Метод позволяет выбрать вкладку так, как будто был сделан щелчок по ее ярлыку. Второй аргумент — индекс нужной вкладки (позиции отсчитываются от нуля). Он же может быть идентификатором вкладки (см. требования к разметке)

load

.tabs(‘load’, index)

Программно перезагружает содержимое вкладки, используя AJAX-запрос. Этот метод всегда загружает содержимое, даже если опция cache имеет значение true. Второй аргумент — индекс нужной вкладки (позиции отсчитываются от нуля)

url

.tabs(‘url’, index, url)

Изменяет URL, откуда с помощью AJAX-запроса будет загружаться содержимое. Второй аргумент — индекс нужной вкладки (позиции отсчитываются от нуля). Указанный в третьем аргументе URL будет использоваться и для дальнейших загрузок

length

.tabs(‘length’)

Метод просто возвращает число вкладок

Таблица 17.18 (окончание)

Метод

Описание

abort

.tabs(‘abort’)

Завершает все выполняющиеся AJAX-запросы и анимацию

rotate

.tabs(‘rotate’, ms, [continuing])

Устанавливает автоматический перебор всех вкладок. Второй аргумент — интервал времени (в миллисекундах), в течение которого очередная вкладка будет активной. Чтобы остановить перебор вкладок во втором аргументе, необходимо передать 0 или null. Третий аргумент определяет логику при выборе вкладки пользователем. Значение true — перебор вкладок будет продолжен. Значение по умолчанию — false

Одна из самых интересных возможностей виджета Tabs — способность загружать содержимое в область информационного наполнения через AJAX-запросы. Эта возможность будет продемонстрирована в листинге 17.6.9. Код приведен полностью, поскольку требования к HTML-разметке здесь несколько иные.

Листинг 1 7 .6 .9 . Использование виджета Tabs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-6-9</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<ul>
<li><a href="ajax_1.html"><span>Content 1</span></a></li>
<li><a href="ajax_2.html"><span>Content 2</span></a></li>
<li><a href="ajax_3.html"><span>Content 3</span></a></li>
<li><a href="#tabs-4">Content 4</a></li>
</ul>
<p>4. Информационное наполнение для вкладки №4.</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-17-6-9</title>

$(function(){

$("#tabs").tabs();

});

</script>

</head>

<body>

<ul>

<li><a href="ajax_1.html"><span>Content 1</span></a></li>

<li><a href="ajax_2.html"><span>Content 2</span></a></li>

<li><a href="ajax_3.html"><span>Content 3</span></a></li>

<li><a href="#tabs-4">Content 4</a></li>

</ul>

<p>4. Информационное наполнение для вкладки №4.</p>

</body>

</html>

В примере из листинга 17.6.9 мы не передавали виджету никаких дополнительных опций, оставив все настройки по умолчанию. Тем не менее, содержимое области информационного наполнения трех вкладок теперь загружается из внешних файлов с использованием AJAX-запросов. Уделите особое внимание изучению HTMLразметки. Имейте в виду, что вкладки с информацией, загружаемой с помощью AJAX-запросов, вполне успешно могут соседствовать с вкладками, созданными обычным способом.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо применить на веб-странице виджет Tabs.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply