Создание вкладок на jQuery. Мой плагин: TTabs (Test-Templates Tabs)

Создание вкладок на jQuery. Мой плагин: TTabs (Test-Templates Tabs)


После долгих поисков оптимальных и удобных способов реализации вкладок, я пришел к выводу, что неплохо было бы сделать свой вариант. Представляю вам свой мини-плагин для jQuery - TTabs. Весом всего в 1кб он способен создать сколько угодно вкладок на странице.

Все, что вам нужно, чтобы создать на своем сайте вкладки - это наличие библиотеки jQuery и вот этого маленького плагина

Подключаем плагин. Добавляем код в секцию head:

<script type="text/javascript" src="jquery.ttabs.js"></script>



создаем html код для вкладок:

<div class="tt-tabs">
    <div class="index-tabs">
        <span>Первая вкладка</span>
        <span>Вторая вкладка</span>
        <span>Третья вкладка</span>
    </div>
    <div class="index-panel">
        <div class="tt-panel">
            11111
        </div>
        <div class="tt-panel">
            222222
        </div>
        <div class="tt-panel">
            33333
        </div>
    </div>
</div>


Ну и теперь активируем наш плагин и применяем его:

$('.tt-tabs').ttabs();


Чтобы создать несколько блоков с вкладками, мы просто дублируем html код и меняем название класса у блока, в котором содержаться вкладки:

$('.tt-tabs2').ttabs();


Что вам было понятнее, вот рабочий пример, в котором задействованы несколько блоков с вкладками. Стиль выбранной вкладки определяется с помощью класса .active-ttab

Не правда ли, просто? При этом вес самого плагина составляет всего 1кб! Пользуйтесь и оставляйте ваши комментарии!

P.S. Забыл сказать, что плагин на данный момен имеет одну настройку - вы можете указать название класса активной вкладки:

$('.tt-tabs').ttabs({
activeClass: 'active-ttab2'
});
23474
32
Комментарии
GRAND_LAW
16 июня 2011 19:39
Почему то не работает, помогите пожалуйста

делаю все по инструкции, ставлю и выводится:

Первая вкладка Вторая вкладка Третья вкладка
11111
222222
33333
Алексей
test-templates
16 июня 2011 19:41
GRAND_LAW, библиотека jQuery подключена?
GRAND_LAW
16 июня 2011 20:03
Да не знаю))) wink

из всего что я подключил, это http://test-templates.com/ttabs/jquery.ttabs.js
Алексей
test-templates
16 июня 2011 20:05
тогда посмотрите внимательно страницу - http://test-templates.com/ttabs/index.html

что там подключено
Amsirion
4 июля 2011 09:45
$('.tt-tabs').ttabs(); - Это куда вставлять?
Алексей
test-templates
4 июля 2011 11:06
<script>
$(document).ready(function(){
$('.tt-tabs').ttabs();
});
</script>


в ваш html файл
ПафНутиЙ
4 августа 2011 08:56
test-templates
Можно ещё немного красочности добавить:
$(this).parent().parent().find('.index-panel .tt-panel').eq(numEl).show();

Заменить на
$(this).parent().parent().find('.index-panel .tt-panel').eq(numEl).fadeIn(300);
Алексей
test-templates
4 августа 2011 11:26
можно еще slideDown поставить )))
ПафНутиЙ
4 августа 2011 13:04
Кстати, display:none; для .tt-panel лучше убрать - ПС не любят текст в display:none;
а вместо этого добавить в скрипт после
return this.each(function() {

вот это:
$('.tt-panel').hide(0);

Думаю так будет правильнее по двум причинам, первое - избавимся от display:none; и второе - при отключении js в браузере содержимое табов будет видно.
Алексей
test-templates
4 августа 2011 19:46
минус у этого способа один - пока страница не загрузится, будут видны все вкладки
ПафНутиЙ
4 августа 2011 21:49
многие сайты вообще выглядят ужасающе пока полностью не загрузятся js smile
Алексей
test-templates
6 августа 2011 00:25
поэтому то, что завит от js, надо отображать после загрузки страницы, чтобы сразу норм показывалось, а не сначала фигня, а после загрузки норм
ПафНутиЙ
6 августа 2011 07:00
тогда можно спрятать лишнее с помошью text-ident: -9999; smile
Алексей
test-templates
6 августа 2011 12:45
а если у блока с текстом будет паддинг?)
ПафНутиЙ
6 августа 2011 18:25
Ну это впринципе индивидуально решается всё :) для универсальности конечно же правильнее display: none; но для конкретного сайта (в плане улучшения поисковой оптимизации) можно предпринять разные решения.... text-ident, отрицательный margin, абсолютное позиционирование и т.д.... в общем по месту. главное не это, а то, что скрипт лёгкий и работает не плохо :)
Алексей
test-templates
6 августа 2011 18:28
ну да) ничего нового) просто надоело каждый раз искать различные варианты для вкладок
Amsirion
29 августа 2011 19:01
Хм, у меня не получается. Вкладки не переключаются, jQuery я подключил.

Можно поподробней насчёт:

Для активации в коде сайта нужно вставить код jquery: $('селектор').ttabs();
* где в роли селектора может выступать класс, id или любой другой селектор jquery
Алексей
test-templates
29 августа 2011 19:03
Amsirion,
в индекс файл вставили
<script>
$(document).ready(function(){
$('.tt-tabs').ttabs();
});
</script>

??
Amsirion
29 августа 2011 23:10
test-templates,
вставил, у меня это fullstory.tpl

<script type="text/javascript" src="{THEME}/js/active.js"></script>
<script>
$(document).ready(function(){
$('.index-tabs').ttabs();
});
</script>
<div class="mb0 news_bg">
<div class="news_top">
<div class="full_bg">
<div class="h_auto news">.......
ShamanGood
14 сентября 2011 07:37
Все работает прекрасно. Спасибо огромное. Не срабатывает стиль активной вкладки. Прописал в css .active-ttab { background:#a1b0b6; } при нажатии на вкладку она все равно остается прежней
Алексей
test-templates
14 сентября 2011 13:24
ShamanGood, добавьте !important, т.е. у вас будет так:
background:#a1b0b6 !important;
gigit
13 октября 2011 23:28
Доброго дня.
Все очень красиво в плагине, но есть один вопрос возможно сделать так чтобы табы выбирались из выпадающего списка для экономии места.
Если возможно сделать какова будет его стоимость?
Amsirion
19 ноября 2011 22:54
А можно ли сделать ЗАПОМИНАНИЕ ОТКРЫТОЙ ВКЛАДКИ?
keeper
29 февраля 2012 14:51
А как изменить стиль во втором блоке вкладок???
ПафНутиЙ
29 февраля 2012 15:01
Amsirion,
_http://dimox.name/universal-jquery-tabs-script/

Цитата: keeper
А как изменить стиль во втором блоке вкладок???

.tt-panel + .tt-panel {background: #f00;}
keeper
1 марта 2012 10:55
ПафНутиЙ,
мож я не так спросил... имеется 2 блока с 2 вкладками

1 - (1-2)
2 - (1-2) - как тут изменить оформление вкладки (шрифт в названии фон во вкладке и т.д)

при попытке изменить оформление меняются все
ПафНутиЙ
1 марта 2012 11:12
keeper,
<div class="tt-tabs">

во второй вкладке поменять на
<div class="tt-tabs two">

в css пишем
.tt-tabs.two .tt-panel {background: #f00;}


В общем работайте головой)))
shved
29 августа 2012 15:37
Извини за беспокойство, Алексей. Возникла такая проблема. Сделал все по инструкции, но при загрузке страницы открываются все вкладки сразу. Если нажать на любую вкладку, то все становится как надо. Как сделать, чтобы вкладки не открывались все сразу?
venrom
30 июля 2013 17:09
Всем привет.Есть вопрос,как сделать автопереключение между вкладками по времени?
shaman
19 декабря 2013 18:50
Здравствуйте, использую стандарные коды, подскажите пожалуйста как сделать что бы тело вкладки было строго под именем вкладки (ширину я сам настрою)

http://i57.fastpic.ru/big/2013/1219/8c/960afe2d2e85b002aaa1e33e405b3a8c.jpg
Мы всегда на связи:
Телеграмм
ICQ
Gmail
Yandex
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Телеграмм
ICQ
Gmail
Yandex