В общем случае применение этого UI jQuery может быть и шире, но использование для построения навигационной панели – это первое, что приходит в голову. Такая панель хоть и имеет управление на JavaScript, управляется через имена селекторов, поэтому например поисковый робот «увидит» чистый HTML, а пользователь – элегантное меню. Посмотрим, как это может выглядеть и подробно разберем, как это работает. Внимание! Эта статья устарела! Новую статью можно почитать здесь.
Как обычно заглянем на сайт разработчиков. Вот, что написано там.

$("#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 я расскажу в отдельной статье.

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

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal