Июн 26

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

Рубрики: jQuery Метки: , ,  Количество просмотров: 3 954

Недавно узнал об 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 и т.д.)

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

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

Посмотреть как вживую работает мой пример можно на моем портале о рыбалке – http://rybalka.tv, который на днях кстати вышел на 1к в сутки по данным GA.

Другие статьи автора

Комментарии

  1. Цитировать Евгений
    26 июня 2009 в 11:55

    Неплохо бы ещё после клика на таб повесить $(this).blur(); чтобы выделение не сохранялось.

  2. Цитировать Samborsky
    26 июня 2009 в 12:30

    Там все настраивается: http://flowplayer.org/tools/tabs.html

  3. Цитировать none
    26 июня 2009 в 15:29

    Tools-ы – хорошИ (-:
    Лёгкие, быстрые – красота! (-:

  4. Цитировать Влад
    29 июня 2009 в 8:57

    Вот хоть убейте-не понял для чего они нужны. Вроде навигация для сайта? А для каких движков..?

  5. Цитировать Александр
    3 июля 2009 в 7:07

    Вот хоть убейте-не понял для чего они нужны. Вроде навигация для сайта? А для каких движков..?

    Для каких захочешь, можешь куда угодно эту фичу пихать. Как фантазия позволит, это не плагин конкретно под wp или dle.

  6. Цитировать Денис
    21 июля 2009 в 18:20

    Я конечно понимаю что не совсем по именной этой теме Jquery но у меня такой вопросик к вам! Как человеку прошаренному в этой библиотеке! Вы бы не могли выложить что нить подобное может делали когда нить муверы в таблице ну скажем есть продукты а их нужно двигать ввех вниз без перезагрузки страницы??? буду оч признателен!

  7. Цитировать Samborsky
    21 июля 2009 в 18:50

    Вот тут http://www.samborsky.com/samborsky_polls/ варианты ответов как раз двигать можно.
    Плагин называется Table dnd

  8. Цитировать Денис
    30 июля 2009 в 15:46

    Ок! Спасибо огромное попытаюсь разобраться что к чему!!!!

    P.S. еше раз спасибо!!!

  9. Цитировать Владимир
    30 июля 2009 в 21:06

    на вашем сайте есть эти табы справа
    вы не могли бы описать их создание?

  10. Цитировать Bola
    8 ноября 2009 в 13:18

    я присоединяюсь к последнему комментарию, пытаюсь создать табы на maxsite – и ничего не выходит, табы не появляются…

  11. Цитировать GTAlex
    23 декабря 2009 в 6:49

    Можно готовый код выложить для скачивание, а то непонятно где и как сама библиотека подключается и п.4 вообще куда вставлять ?

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