Записи с тегом "JQuery Tools"

июня 26

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

Рубрики: jQuery Метки: , ,

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

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

  1. Активный таб
  2. При наведении
  3. Таб в пассивном состоянии

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

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

tabs

2. Создается CSS файл. Здесь тоже сложного ничего нет, единственные хлопоты - вычислить координаты каждого шаблона. Пример CSS файла возьмите в тестовых примерах - http://flowplayer.org/css/tabs.css

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 и т.д.) Читать далее »

Комментариев (11)