JQuery Tools — еще один способ делать табы

Недавно узнал об jQuery библиотеке, которая является очень простым и легковесным аналагом jQuery UI (функционал правда слабее). Библиотека называется JQuery Tools, а подробно я хотел бы остановиться на создании с помощью нее табов. JS-движок табов занимает всего 3.3 Kb.

Делаются табы с помощью спрайта, в котором создаются шаблоны разной длины, чтобы покрыть как короткий так и длинный текст в заголовке таба.

Делаются в трех экземплярах:
1. Активный таб;
2. При наведении;
3. Таб в пассивном состоянии.

Процесс создания табов

1. Создание спрайта. Спрайт создал в фотошопе. GIMP что-то для меня остается пока загадкой (Да и разбираться нет желания).

2. Создается CSS файл. Здесь тоже сложного ничего нет, единственные хлопоты – вычислить координаты каждого шаблона.

JQuery Tools - еще один способ делать табы

3. html код. Выглядит он так:

<!-- the tabs -->
<ul class="tabs" id="my_tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a class="w4" href="#">Длинный заголовок в табе</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes" id="my_panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>

Обратите внимание. Если текст в заголовке большой, то применяйте соответствующий класс (w1,w2,w3,w4 и т.д.)

4. Оживляем табы:

$("#my_tabs").tabs("#my_panes > div");