Вы находитесь здесь:Плагины jQuery»liTabs - jQuery Tabs или вкладки на jQuery

liTabs - jQuery Tabs или вкладки на jQuery

Вторник, 30 Октябрь 2012 01:26 Автор 

liTabs - jQuery Tabs или вкладки на jQuery
jQuery плагин liTabs создает вкладки-табы с различными эффектами переключения. Структура кода liTabs такова, что вам не потребуется прописывать оригинальные идентификаторы для содержимого вкладок-табов.

Пример работы на JSFIDDLE

Плагин liTabs содержит 4 эффекта переключения:
clasic - без эффектов,
fade - плавное затухание содержания,
hSlide - горизонтальный слайд содержания,
vSlide - вертикальный слайд содержания


Все табы одной общей группы должны находиться внутри элемента "ul" с классом "t_wrap" и любым произвольным классом для инициализации, например "liTabs":
<ul class="liTabs t_wrap"></ul>

Каждый отдельный таб записываем элементом "li" с классом "t_item":
<ul class="liTabs t_wrap">
    <li class="t_item"></li>
    <li class="t_item"></li>
    <li class="t_item"></li>
</ul>

Для каждого таба создаем еще по два элемента:
Первый - это сама так называемая вкладка (ссылка, таб), элемент с именем нашего таба.
Этим элементом будет тег "a" с классом "t_link":
        
<li class="t_item">
    <a class="t_link" href="#">Название таба</a>
</li>

Второй - элемент с содержанием нашего таба (текст, картинки, ссылки, мультимедийный файлы)
Этим элементом будет тег "div" с классом "t_content":
<li class="t_item">
    <a class="t_link" href="#">Название таба</a>
    <div class="t_content">Содержание таба</div>
</li>

Код для группы из трех табов будет выглядеть вот так:
<ul class="liTabs t_wrap">
    <li class="t_item">
        <a class="t_link" href="#">Название таба 1</a>
        <div class="t_content">Содержание таба 1</div>
    </li>
    <li class="t_item">
        <a class="t_link" href="#">Название таба 2</a>
        <div class="t_content">Содержание таба 2</div>
    </li>
    <li class="t_item">
        <a class="t_link" href="#">Название таба 3</a>
        <div class="t_content">Содержание таба 3</div>
    </li>
</ul>

Подключаем CSS плагина "liTabs":
<link rel="stylesheet" href="/css/liTabs.css">

Осталось подключить библиотеку "jQuery" и плагин "liTabs":
<script src="/js/jquery-1.8.min.js"></script>
<script src="/js/jquery.liTabs.js"></script>

И проинициализировать наш плагин:
$(function(){
    $('.liTabs').liTabs({
        duration: 500,     //A string or number determining how long the animation will run
        effect:'vSlide'    //clasic, fade, hSlide, vSlide
    });
});

Чтобы после загрузки страницы показать содержание первого, либо любого другого таба, дописываем элементу "t_link" класс "cur":
<ul class="liTabs t_wrap">
    <li class="t_item">
        <a class="t_link cur" href="#">Название таба 1</a>
        <div class="t_content">Содержание таба 1</div>
    </li>
    <li class="t_item">
        <a class="t_link" href="#">Название таба 2</a>
        <div class="t_content">Содержание таба 2</div>
    </li>
    <li class="t_item">
        <a class="t_link" href="#">Название таба 3</a>
        <div class="t_content">Содержание таба 3</div>
    </li>
</ul>

BugFix

14.08.2013 Если класс .cur не стоит у ссылки, то по умолчанию открыта первая вкладка
24.04.2013 Добавлена поддержка вложенности табов
20.12.2012 Исправлен баг с определением размеров элементов в скрытых табах
19.12.2012 Исправлен баг css в IE7, вызывающий неправильное расположение табов.

Прочитано 8302 раз Последнее изменение Воскресенье, 30 Март 2014 17:14
Оцените материал
(4 голосов)

Комментарии   

 
# vladlis 07.11.2012 11:07
Отличный таб! Очень просто устанавливается . Без заморочек, простой. Времени на разбор кода не требуется, все понятно. Большое спасибо автору.
Ответить | Ответить с цитатой | Цитировать
 
 
# Артем 29.04.2013 13:56
А самое главное, что при помощи этого замечательного скрипта можно выводить схемы проезда Яндекс-карт во вкладках.
Ответить | Ответить с цитатой | Цитировать
 
 
# Квариры 13.08.2013 19:41
не работает.... здесь http://www.nasutkivminske.by/board/# все подключил, но что-то не получается... подскажите пожалуйста в чем проблема?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 13.08.2013 20:39
Цитирую Квариры:
не работает.... здесь http://www.nasutkivminske.by/board/# все подключил, но что-то не получается... подскажите пожалуйста в чем проблема?

1. У вас подключено одновременно две версии jQuery.
Версия 1.8.0 - её вы видимо поключили вместе с плагином табов
И версия 1.3.2 - её вы подключили наверное с каким-то другим плагином, или эта версия подключена по умолчанию в вашем шаблоне так как ссылка на ней укозовская http://s77.ucoz.net/src/jquery-1.3.2.js

Проблема именно в этой версии - она давно устарела и не поддерживает такие события как "on". Постарайтесь отключить её и оставить только одну подключенную версию jQuery (более новую).
Ответить | Ответить с цитатой | Цитировать
 
 
# Квариры 14.08.2013 08:36
Спасибо за быстрый ответ. Изменил версию на 1.7, но результат тот же, хотя на другом сайте работает без проблем. Вроде бы ничего сложного в подключении, но что-то мешает... гляньте пжл.
Ответить | Ответить с цитатой | Цитировать
 
 
# Квариры 14.08.2013 09:09
jquery.liTabs.j s заработал когда поставил перед закрывающим body)) но начались другие проблемы... позиция отображения...
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 14.08.2013 09:37
Цитирую Квариры:
jquery.liTabs.j s заработал когда поставил перед закрывающим body)) но начались другие проблемы... позиция отображения...

Скачайте заново архив и замените файлы
liTabs.css и jquery.liTabs.j s
Ответить | Ответить с цитатой | Цитировать
 
 
# Квариры 14.08.2013 11:27
Спасибо. практически все проблемы исчезли, но отображение 1 вида материалов начинается с конца страницы, видимо сам шаблон конфликтует... в любом случае, спасибо за оперативную помощь! +++
Ответить | Ответить с цитатой | Цитировать
 
 
# Квариры 14.08.2013 17:26
Решение нашлось с помощью обертки табов в таблицу... бр..))
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 14.08.2013 18:24
Цитирую Квариры:
Решение нашлось с помощью обертки табов в таблицу... бр..))

Вы могли бы просто задать элементу UL (родителю табов) стиль: overflow:hidden.
Вам ведь нужно было лишь изолировать элемент со свойством "clear:both" от левой колонки со свойством "float:left"
Ответить | Ответить с цитатой | Цитировать
 
 
# Денис 24.03.2016 11:18
Подскажите как реализовать автосмену вкладок через определенный интервал времени
Ответить | Ответить с цитатой | Цитировать
 
 
# Денис 09.04.2016 08:44
Сам же отвечаю на свой вопрос, может кому пригодится:
var autoChanger = setInterval(fun ction() {
var container = $('.liTabs1');
var tabs = container.find( '.t_link');
var currentTab = container.find( '.t_link.cur');
var nextTab = tabs.eq(current Tab.parent().in dex()+1);

if (nextTab.length == 0) {
nextTab = tabs.eq(0);
}

nextTab.click() ;
}, 1000);
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 11.04.2016 01:35
Цитирую Денис:
Сам же отвечаю на свой вопрос, может кому пригодится:
var autoChanger = setInterval(function() {
var container = $('.liTabs1');
var tabs = container.find('.t_link');
var currentTab = container.find('.t_link.cur');
var nextTab = tabs.eq(currentTab.parent().index()+1);

if (nextTab.length == 0) {
nextTab = tabs.eq(0);
}

nextTab.click();
}, 1000);

:) Вариант!
Ответить | Ответить с цитатой | Цитировать
 

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

Защитный код
Обновить

Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="http://masscode.ru" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliTabs - jQuery Tabs или вкладки на jQuery