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

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

:) Вариант!
Ответить | Ответить с цитатой | Цитировать
 
 
# Shantae 11.08.2018 05:15
You made some really good points there. I looked on the net for
more info about the issue and found most individuals will go along with your views on this site.


Here is my site; dictatorial: http://111You.com/home.php?mod=space&username=efomapas
Ответить | Ответить с цитатой | Цитировать
 
 
# Dina 16.08.2018 01:07
This is the right website for everyone who wishes to find out about this topic.
You know a whole lot its almost tough to argue with you (not that I actually would want
to…HaHa). You certainly put a fresh spin on a subject that's been discussed for years.
Excellent stuff, just great!

Here is my web page: sunbathing: http://nsaforum.Forumcity.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Taren 23.08.2018 08:58
You possibly can feed your canine one or two occasions
a day.

Feel free to visit my blog post ... dog feeding schedule recommendations : http://www.facemook.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Korey 07.10.2018 12:47
We are a group of volunteers and starting a new scheme in our community.

Your site provided us with valuable info to work on. You've done an impressive
job and our entire community will be grateful to you.


Feel free to visit my webpage; gibt es
Tabletten zum abnehmen: http://www.world.gr/forum/member.php?u=96688
Ответить | Ответить с цитатой | Цитировать
 
 
# Candelaria 11.10.2018 21:05
hi!,I love your writing so a lot! proportion we keep in touch more approximately your article on AOL?
I require a specialist in this house to unravel my problem.
May be that is you! Having a look ahead to peer you.



Feel free to surf to my homepage diätpillen test: https://inkbunny.net/binkleya920
Ответить | Ответить с цитатой | Цитировать
 

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

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

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

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

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