Вы находитесь здесь:Плагины 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, вызывающий неправильное расположение табов.

Прочитано 23704 раз Последнее изменение Воскресенье, 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);

:) Вариант!
Ответить | Ответить с цитатой | Цитировать
 
 
# Lorri 29.04.2019 01:21
naturally like your website however you have to test the spelling
on several of your posts. Many of them are rife with
spelling problems and I to find it very troublesome to tell the reality however
I'll surely come back again.

Visit my web page: vitamine voor het haar: http://Ashdoda.net/index.php?subaction=userinfo&user=inydyta
Ответить | Ответить с цитатой | Цитировать
 
 
# Autumn 12.05.2019 21:49
I was recommended this website through my cousin. I
am no longer certain whether or not this submit is written by him as nobody
else recognise such unique approximately my
trouble. You are wonderful! Thank you!

My web page alargamiento de pene: http://cwy360.com/home.php?mod=space&uid=572104&do=profile&from=space
Ответить | Ответить с цитатой | Цитировать
 
 
# Rocco 15.05.2019 02:10
Excellent, what a blog it is! This webpage gives useful information to us, keep it up.


my web-site; aumento peniano
natural: https://free.lk/user/profile/41895
Ответить | Ответить с цитатой | Цитировать
 

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

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

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

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

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