Плагин jQuery Tabs для создания блоков с вкладками

15 мая 2013 | Автор: | Категория: JQuery и PHP

В последнее время понемногу занимаюсь вёрсткой и натяжкой на WP нового дизайна. Так что надеюсь, в скором времени дизайн этого блога обновится.

В процессе верстки пришлось столкнуться с необходимостью создания блока с вкладками (табами) в которых при переключении отображаются категории, архив блога, самые популярные записи и облако тегов. Для реализации этого эффекта я использовал виджет jQuery UI: Tabs, о котором и хочу сегодня рассказать.

Скачать последнюю версию плагина можно на сайте jqueryui.com, там же есть подробное описание всех доступных виджетов с примерами и API документация.

Чтобы виджет заработал, нужно подключить к странице (сайту) библиотеку jQuery и скрипт самого плагина. Для этого между тегами <head></head> вставляются следующие строки:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

В данном случае я подключил скрипты без закачки на свой сервер, используя внешние ссылки. Также был подключен файл стилей, благодаря которому блок с вкладками примет симпатичное визуальное оформление. К слову сказать, на сайте есть визуальный редактор, с помощью которого можно самому создать тему для виджета либо выбрать любую другую из имеющихся шаблонов. Сделать это можно во вкладке Themes.

Между тегами <body></body> необходимо добавить следующую HTML-разметку:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Вкладки №1</a></li>
<li><a href="#tabs-2">Вкладки №2</a></li>
<li><a href="#tabs-3">Вкладки №3</a></li>
</ul>
<div id="tabs-1">
Содержимое вкладки №1
</div>
<div id="tabs-2">
Содержимое вкладки №2
</div>
<div id="tabs-3">
Содержимое вкладки №3
</div>
</div>

В этом html коде элементы <li> являются ярлыками вкладок. Для них посредством якорей заданы ссылки на соответствующие элементы <div>, в которых содержится контент для наполнения вкладок.

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

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

Данный код необходимо вставить между тегами <head></head> и сохранить страницу. Блок с вкладками должен заработать.

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

<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({ active:1 });
});
</script>

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

<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({ event: "mouseover" });
});
</script>

Со всеми параметрами, методами и событиями, которые поддерживает данный плагин можно ознакомится на странице API документации.

Если есть какие-то вопросы, задавайте в комментариях, я постараюсь на них ответить.

Метки: 

Комментарии к "Плагин jQuery Tabs для создания блоков с вкладками"

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *