Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component , чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Tabs и видим, что вместе с ним отметился чекбокс UI Core. Работа виджета Tabs зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. В третьем подключенном файле объединена функциональность ядра UI и виджета Tabs. Четвертый файл понадобится в том случае, если Вам необходимо использовать cookies. Найти его можно в папке архива development-bundle/external/cookie/.
Дальше знакомимся с требованиями виджета Tabs к HTML-разметке.

<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>

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

Теперь привяжем функциональность виджета к HTML-разметке.

<script type="text/javascript">
$(function(){
  $("#tabs").tabs();
});
</script>

Все. С настройками по умолчанию виджет уже работает. Теперь будем передавать ему свои настройки:

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    event: "mouseover",
    selected: 2
  });
});
</script>

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

Сразу еще один пример, который демонстрирует приемы использования cookies для запоминания последней открытой вкладки для того, чтобы впоследствии открыть ее при инициализации. Но, до этого давайте добавим в HTML-разметку кнопку, для того, чтобы кликнув по ней, убедиться, что cookies действительно ставятся.

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

и собственно пример установки cookies

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    cookie: { expires: 7, name: "startTab" }
  });
  $("#getCookie").click(function(){
    var cook = $("#tabs").tabs("option", "cookie");
    alert("name: " + cook.name +
            "\nexpires: " + cook.expires);
  });
});
</script>

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

Мы научились передавать виджету различные опции, а их описания приведены ниже:

ajaxOptions – опции ajax-запроса, которые используются для загрузки удаленного содержимого в область информационного наполнения. По умолчанию используется значение null.

cache – опция определяет, кэшировать или нет информационное наполнение вкладки, загружаемое с помощью ajax-запросов, т.е. загрузить содержимое только однажды или загружать каждый раз, когда совершен щелчок на ярлыке вкладки. По умолчанию используется значение false, т.е. кэширование не производится. Обратите внимание – чтобы воспрепятствовать фактическому кэшированию данных браузером Вы должны дополнительно обеспечить значение false в опциях самого ajax-запроса.

collapsible – по умолчанию используется значение false. Если передать в этой опции значение true, то каждый следующий щелчок на ярлыке вкладки будет скрывать и открывать область информационного наполнения.

cookie – запоминает последнюю выбранную вкладку в cookie. В дальнейшем используется для определения вкладки, открываемой по умолчанию (если не используется опция selected). Требует подключения плагина cookie. Возможно присвоение имени cookie через опцию name.

disabled – массив, содержащий индексы вкладок (отсчет ведется от 0), которые должны быть недоступными при инициализации виджета. Например, disabled: [1, 2] сделает недоступными вторую и третью вкладки.

event – тип события, которое используется для переключения вкладок. По умолчанию используется значение ‘click’. Второе возможное значение ‘mouseover’.

fx – устанавливает анимационные эффекты при открытии/закрытии вкладок. Например: fx: { opacity: «toggle», duration: «slow» }

panelTemplate – HTML-шаблон из которого создается новая область информационного наполнения вкладки в случае создания ее с использованием метода add или при создании вкладки «на лету» с использованием ajax-запроса. По умолчанию имеет значение ‘<div></div>’.

selected – индекс вкладки, (отсчет ведется от 0) которая должна быть открыта при инициализации виджета. По умолчанию используется значение 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 умеет реагировать на разнообразные события. Посмотрим пример использования одного из возможных событий.

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    selected: 2,
    select: function(event, ui) {
      alert("Событие: " + event.type +
            "\nui.tab: " + ui.tab +
            "\nui.panel: " + ui.panel.innerHTML +
            "\nui.index: " + ui.index);
    }
  });
});
</script>

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

ui.tab – ссылка на активированную в настоящий момент вкладку;
ui.panel – ссылка на элемент, в котором заключено информационное наполнение активированной вкладки ;
ui.index – индекс активированной вкладки (отсчет ведется от 0);

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

select – событие tabsselect происходит в момент щелчка по ярлыку вкладки (при наведении указателя мыши на вкладку, если используется опция event: ‘mouseover’). При щелчке на ярлыке активной вкладки ничего не происходит.

load – событие tabsload происходит, когда в область информационного наполнения вкладки было загружено содержимое из внешнего файла.

show – событие tabsshow происходит в момент отображения содержимого вкладки.

add – событие tabsadd происходит каждый раз, когда добавлена новая вкладка.

remove – событие tabsremove происходит каждый раз, когда удалена какая-либо вкладка.

enable – событие tabsenable происходит в момент, когда ранее недоступная вкладка становится доступной.

disable – событие tabsdisable происходит в момент, когда вкладка становится недоступной.

Осталось разобраться с методами виджета Tabs. Для этого добавим еще пару кнопок в HTML-разметку:

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

и пример javascript-кода:

<script type="text/javascript">
$(function(){
  $("#tabs").tabs({
    selected: 2
  });
  $("#startRotate").click(function(){
    $("#tabs").tabs("rotate", 3000, true);
  });
  $("#stopRotate").click(function(){
    $("#tabs").tabs("rotate", null);
  });
});
</script>

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

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

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

disable – .tabs(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .tabs(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .tabs(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

add – .tabs(‘add’, url, label, [index]) метод добавляет новую вкладку. Второй аргумент содержит либо идентификатор создаваемой вкладки, (см. требования к разметке) либо является полным url (относительным или абсолютным, но без поддержки кросс-доменной загрузки) при создании вкладки с использованием ajax. Третий аргумент – название вкладки, отображаемое на ее ярлыке. Четвертый – индекс создаваемой вкладки (позиции отсчитываются от 0).

remove – .tabs(‘remove’, index ) удаляет вкладку. Второй аргумент – индекс удаляемой вкладки (позиции отсчитываются от 0).

enable – .tabs(‘enable’, index) делает доступной ранее недоступную вкладку. Чтобы сделать доступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [ ]);

disable – .tabs(‘disable’, index) делает вкладку недоступной. Активная вкладка не может быть сделана недоступной. Чтобы сделать недоступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3]);

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

load – .tabs(‘load’, index) программно перезагружает содержимое вкладки, используя ajax-запрос. Этот метод всегда загружает содержимое, даже если опция cache имеет значение true. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0).

url – .tabs(‘url’, index, url) изменяет url, откуда с помощью ajax-запроса будет загружаться содержимое. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Указанный в третьем аргументе url будет использоваться и для дальнейших загрузок.

length – .tabs(‘length’) метод просто возвращает количество вкладок.

abort – .tabs(‘abort’) метод завершает все выполняющиеся ajax-запросы и анимацию.

rotate – .tabs(‘rotate’, ms, [continuing]) метод устанавливает автоматический перебор всех вкладок. Второй аргумент – количество миллисекунд, в течение которых очередная вкладка будет активной. Чтобы остановить перебор вкладок во втором аргументе необходимо передать 0 или null. Третий аргумент определяет логику при выборе вкладки пользователем. Значение true – перебор вкладок будет продолжен. По умолчанию используется false.

Все? Пожалуй, нет. Как можно обойтись без примера, где информационное наполнение загружается с использованием ajax-запросов, верно?

Сделать это несложно, но придется немного поменять HTML-разметку:

<div id="tabs">
  <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>
  <div id="tabs-4">
    <p>4. Информационное наполнение для вкладки №4.</p>
  </div>
</div>

Изучите пример этой разметки и обратите внимание, что вкладки с информацией, загружаемой с помощью ajax-запросов, вполне успешно могут соседствовать с вкладками, созданными обычным способом.

Конечно, надо создать еще и файлы, из которых будет загружаться информация. В нашем примере – это ajax_1.html, ajax_2.html и ajax_3.html. А больше ничего и не потребуется. Что касается javascript-кода, можно использовать даже настройки по умолчанию:

<script type="text/javascript">
$(function(){
  $("#tabs").tabs();
});
</script>

Все. Про стилевое оформление не пишу – планирую отдельную статью про это сразу для всех виджетов.

$("#example > ul").tabs();

В общем действительно просто, никаких дополнительных опций не используется. Здесь скорее придется потрудиться над стилевым оформлением навигационной панели. Но стилевое оформление – это другая тема. Давайте испытаем пример и разберемся, как все это работает.

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

Файлы необходимые для реализации подключаем в раздел HEAD, их всего два – это сама библиотека jQuery и файл ui.tabs.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>

Стилевые таблицы упомяну вскользь, целиком их можно посмотреть в файле примера. Здесь можно творить, что душе угодно, не забывая проверить созданную Вами таблицу на совместимость с различными браузерами. Правда есть одно важное замечание: файл ui.tabs.js использует имена классов стилевой таблицы, поэтому, если Вы захотите использовать другие имена, Вам понадобится исправить и файл ui.tabs.js

Что касается HTML-кода – он тоже довольно прост. Если посмотрите исходные коды примера, то обязательно отметите, как четко он структурирован. Отдельно идет ненумерованный список разделов, отдельно блоки с содержимым разделов. В таком коде удобно разбираться, его удобно править при необходимости.

А вот интересующий нас более всего код, приведу без сокращений:

<script type="text/javascript">
$(document).ready(function(){
$("#menu > ul").tabs({
	fxFade: true,
	fxSpeed: slow
});
</script>

Как обычно все «завернуто» в $(document).ready(function(){…}); Дальше все так же просто, как и написано у разработчиков. Просто мы добавили еще пару опций.
fxFade: true – используем функцию «затухания» при переходе на другую вкладку.
fxSpeed: slow – и скорость этого затухания – медленная…
Это конечно далеко не все возможные опции. Наш горизонтальный список может реагировать на события click (щелчок по вкладке), hide (при скрытии вкладки), show (при открытии вкладки) выполнением пользовательских функций. Может переключаться не по клику мышкой, а по event: mouseover, можно задавать открывающуюся по умолчанию вкладку и конечно же во вкладки можно подгружать содержимое используя Ajax. Но о том, как просто работать с Ajax через jQuery я расскажу в отдельной статье.

Буду благодарен, если найдете возможность оставить свои отзывы…