Опубликовано
admin
-
tabs(options) → jQuery
Данный плагин главным образом используется для разделения содержимого на несколько секций (разделов), взамен вы получаете дополнительное пространство, что схоже с интерфейсом, создаваемым плагином accordion.
По умолчанию переключение между отдельными секциями происходит по событию onClick, но данное событие может быть заменено на событие onHover с помощью опции. Содержимое секции может быть загружено через Ajax, указав ссылку в секции.
События (Events)
Данные события возникают, когда происходит взаимодействие с интерфейсом секций:
• tabsselect, tabsload, tabsshow (in that order)
• tabsadd, tabsremove
• tabsenable, tabsdisable
Пример связанного события:
$('#example').bind('tabsselect', function(event, ui) {
// Объекты, которые доступны в контексте функции:
ui.tab // элемент – анкер выбранной секции (на которой произошло нажатие).
ui.panel // элемент, который содержит контент секции, выбраной с помощью интерфейса.
ui.index // основанный на нуле индекс выбранной секции (по которой произошло нажатие).
});
Учтите, что если обработчик события tabsselect вернет false, секция на которой произведен щелчок мыши не становится выбранной (полезно в примерах если переключение к следующей секции не допускается в связи с не заполнением формы).
AJAX НАСТРОЙКИ
Данный плагин позволяет загружать содержимое секций через Ajax в самом простом виде.
Код HTML слегка отличается от статических секций следующим: списком ссылок на существующий ресурс (откуда загружается контент) и совсем нет дополнительных контейнеров. Секции, содержащие контент создаются мгновенно, на "лету":
<div id="example">
<ul>
<li><a href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
Если ссылка теряет связь с ресурсом, загружаемым через AJAX, то содержание страниц, всё равно будет доступно с отключенным JavaScript.
Учтите, что если вы хотите многократно использовать содержимое существующего раздела, то это можно сделать выбрав соответствующий атрибут title и id элемента в котором находится содержимое:
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
и контейнер:
<div id="Todo_Overview"> ... </div>
(обратите внимание, как пробел был заменён символом подчеркивания)
Это полезно, если вам необходим удобно читаемый хэш URL взамен скрытого URL.
Кнопка «назад» и закладки
Плагин Tabs 2 уже поддерживает данную функциональность, несмотря на то, что history плагин необходимо перписать впервую очередь (он не работает в Safari 3 и есть общие небольшие недостатки), до того как он сможет создать переход назад. Это планируется и Klaus работает всякий раз как находит время. Всё же текщие ошибки в UI Tabs плагине имют более высокий приоритет.
Как это использовать...
...вернуть индекс текущего выбранного раздела
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
...открытие ссылок в текущем разделе взамен того чтобы покинуть страницу
"Hijax" ссылки будут загружены после содержимого разделов:
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
...выбор раздела с помощью текстовой ссылки взамен нажатия ссылок расположенных в заголовке разделов
var $tabs = $('#example').tabs(); // выбор первого раздела
$('#my-text-link').click(function() { // привязать событие click к ссылке
$tabs.tabs('select', 2); // переключится на третий раздел
return false;
});
...предупреждение переключения между разделами при нажатии в зависимости от проверки правильности заполнения формы
Возвращая false, при выборе раздела, обработчик предотвращает выбор элемента, по которому произошло нажатие.
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // проверка правильности формы, возвращающая true или false
return isValid;
}
});
...незамедлительно выбрать только что созданный раздел
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
...перход по ссылкам разделов URL взамен загрузки содержимого страниц на которые указывет данные ссылки через ajax
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
...предупреждение FOUC (Flash of Unstyled Content) до того как плагин будет запущен
Добавьте необходимые классы для сокрытия неактивных разделов панели к HTML немедленно – учтите,
что это не приводит к разрушению с отключенным JavaScript:
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>
Почему...
...my slider, Google Map, sIFR и т.п. не работают, когда они помещены в скрытый (неактивный) раздел?
Любые компоненты, которые требуют вычисления размеров для их инициализации, не будут работать в скрытых
разделах, потому что панель разделов скрывается через свойство display: none, поэтому любые элемент для которых не указана их актуальная ширина и высота не будут отображены (0 в большинстве браузеров).
Данный недостаток легко обойти. Используя off-left technique для скрываемых неактивных разделов панелей. Например, замените в ваших стилях ".ui-tabs .ui-tabs-hide" следующим
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
Для Google карт вы можете так же изменить размеры карты, когда раздел будет отображён, например:
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() вызовет Google Maps' checkResize() для редких случаев.
Зависимости
• UI Core
• Для использования cookie: jquery.cookie.js
• Обязательный CSS:
.ui-tabs .ui-tabs-hide {
display: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$("#tabs").tabs();
});
});
</script>
</head>
<body class="iframe">
<div class="demo">
<div id="tabs">
<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>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo,
vehicula tempus, commodo a, risus. Curabitur nec arcu.
Donec sollicitudin mi sit amet mauris.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat,
odio metus gravida ante, ut pharetra massa
metus id nunc. Aenean vel metus.
Ut posuere viverra nulla. Aliquam erat volutpat.
Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis.
Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis.
Duis id erat. Suspendisse potenti.
Aliquam vulputate, pede vel vehicula accumsan,
mi neque rutrum erat, eu congue orci lorem eget lorem.
.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. </p>
</div>
</div>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->
</body>
</html>
Плагин jQuery UI Tabs использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются.
Если необходим более глубокий уровень настройки, существует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.
Образец разметки jQuery UI CSS струтктуры классов
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
<ul class="ui-tabs-nav ui-helper-reset
ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs-1"> Nunc tincidunt</a></li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-2">Proin dolor</a></li>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
<p>Tab one content goes here.</p>
</div>
...
</div>
Примечание: Данный образец разметки создан посредством плагина tabs,
это не разметка для того чтобы создать разделы.
Для этого достаточно следующей разметки:
<div id="tabs">
<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>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>