Создание вкладок на 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'
});
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
Похожие новости:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Все шаблоны совместимы с актуальной версией движка
Последние новости:

Поздравлю всех с Новым 2017 годом!

31-12-2016, 00:24
Поздравлю всех с Новым 2017 Годом! Пусть все Ваши желания обязательно сбудутся и в новом году будет только хорошее настроение! Ну и какой же новый год без подарков?) Представляю БЕСПЛАТНЫЙ шаблон для DLE 11.2 - FanBox (Test-Templates)! Качайте и используйте шаблон на своих сайтах в свое

11.11 Всемирный день распродажи! Успей купить любой шаблон со скидкой 50%! Только сегодня!

11-11-2016, 17:32
Только сегодня! Честная скидка 50% на любой шаблон! Успей затариться на распродаже =) За получением скидки пишите в icq или на почту!
Все новости
Test-Templates Google+

Test-Templates Youtube

Дружественные ресурсы:
Опрос
Купили бы вы версии наших шаблонов под WP?
Да, конечно
Нет, это не нужно
Не готов работать с WP