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

Прочитано 21863 раз Последнее изменение Воскресенье, 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
Ответить | Ответить с цитатой | Цитировать
 
 
# Alta 27.10.2018 04:45
I was extremely pleased to discover this website.
I want to to thank you for ones time for this particularly fantastic read!!
I definitely appreciated every part of it and i also have you
saved to fav to look at new things in your site.

Here is my homepage; haar vitamine: http://kinopoisckhd.ru/index.php?subaction=userinfo&user=uwekyvom
Ответить | Ответить с цитатой | Цитировать
 
 
# Maribel 30.10.2018 19:44
Hi there are using Wordpress for your blog platform? I'm new to
the blog world but I'm trying to get started and set up my own. Do you need any coding knowledge to make your own blog?

Any help would be greatly appreciated!

my blog post; vitamine per
capelli: http://indarte.org/forums/users/iqovegere/
Ответить | Ответить с цитатой | Цитировать
 
 
# Glenna 08.01.2019 06:52
Hi, I do believe this is an excellent site. I stumbledupon it ;
) I'm going to return yet again since i have saved
as a favorite it. Money and freedom is the greatest way to change, may
you be rich and continue to help other people.


my webpage Olejki konopne CBD: http://029xzwj.com/member/index.php?uid=oboban
Ответить | Ответить с цитатой | Цитировать
 
 
# Kellye 09.01.2019 00:04
We're a group of volunteers and opening a new scheme in our community.
Your website provided us with valuable info to work on. You've done an impressive
job and our entire community will be grateful to you.


my website: adelaide temperature: http://Ortcam.com/profile.php?u=yneqac
Ответить | Ответить с цитатой | Цитировать
 
 
# Mark 23.01.2019 05:05
You really make it seem really easy along with your presentation but I
to find this matter to be actually one thing which I feel I would by
no means understand. It sort of feels too complicated and extremely
vast for me. I'm taking a look forward to your next post, I'll attempt to get the hold
of it!

Check out my web site; Arlette: http://www.timeisnow.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Hilda 07.02.2019 11:18
Wow, incredible blog layout! How long have you been blogging for?

you make blogging look easy. The overall look of your website is
wonderful, let alone the content!

Also visit my webpage ... b - www.neshphotography.com: http://www.neshphotography.com/ivana-and-andrews-wedding/ -
Ответить | Ответить с цитатой | Цитировать
 
 
# Otto 13.02.2019 14:42
Of course, this is a costly venture, but can rejuvenate the general appearance.
Months ahead of the decision to sell the property is manufactured, the homeowner must examine their very own property, both in and out, through the eyes of a potential buyer.
Sometimes they will also be able to paint the brand for any favored team to the court as well.


Here is my homepage b; Stepanie: http://airportshuttles.detroitairportconnector.com/dtw/archives/7,
Ответить | Ответить с цитатой | Цитировать
 
 
# Eartha 14.02.2019 08:23
While both will definitely be expensive for you personally, once you build, you
will discover areas that you can help keep your precious dollars
for other activities. It is also far better to buy an electric or battery operated machine for warehouse operations.
If they come across anything amiss, they'll notify the builder and ask
for that they make changes.

Check out my web site; b (www.arredoufficiomarca.com: http://www.arredoufficiomarca.com/?option=com_k2&view=itemlist&task=user&id=1491256)
Ответить | Ответить с цитатой | Цитировать
 
 
# Juli 26.02.2019 19:44
She didn't like her tribe, (who picked her last) calling them "the dumbest people on earth" and was easily
voted out at the first tribal council. Raphael transformed the picture of
Madonna within the religious themes in to a secular
and graceful human mother successfully. Then again there are several wedding
photographers on the market who claim they may be professionals but it's only when you
see pictures that aren.

Also visit my weblog ... b (Glenna: http://krasnodar-23region.ru/user/KattieSelwyn3/)
Ответить | Ответить с цитатой | Цитировать
 
 
# Rolando 26.02.2019 23:37
Other benefits such as to be able to search
for any movie you want through title, actor or genre, inside
them for hours free self-addressed envelopes back to your video returns
are added bonuses, but on the whole, there appears to be few arguments against renting or in favor of buying
DVDs. * Learning with a teacher are expensive, and often good teachers
possess a lengthy waiting list for potential students. However, even now, there are numerous people around America, who prefer letting their relatives and buddies click photographs and attempt to
capture memorable moments of their wedding day.


Feel free to surf to my webpage :: b (Remona: http://im-42.4host.kz/user/Celsa09Q79186081/)
Ответить | Ответить с цитатой | Цитировать
 
 
# Deandre 20.03.2019 17:32
When dealing with car liquids, that knows what can end up going where and you shouldn't
get any dangerous liquids inside your eye since it might lead to serious damage.

If you smell something inside your engine, especially a smoky
smell; they are warning signs. This in turn rotates the other pulley wheels
including, importantly, the alternator pulley.


Feel free to surf to my website; b (Taylor: http://erdalcelik.org/user/ElenaChavis9018/)
Ответить | Ответить с цитатой | Цитировать
 
 
# Hanna 22.03.2019 09:26
Very shortly this site will be famous among all blogging
and site-building users, due to it's fastidious content

Also visit my blog post; Annetta: http://googlenowthis23.com
Ответить | Ответить с цитатой | Цитировать
 

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

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

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

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

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