Универсальный jQuery-скрипт для блоков с вкладками (табами)
Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.
С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.
Почему я называю свой новый скрипт для jQuery-вкладок универсальным:
- он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
- можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
- содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Что ж, хватит сухих слов, переходим к сути.
Код jQuery-скрипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).
Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | (function($) { $(function() { $('ul.tabs').each(function() { $(this).find('li').each(function(i) { $(this).click(function(){ $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150); }); }); }); }) })(jQuery) |
Добавлено 07.03.10
В комментариях подсказали еще более сокращенный вариант этого скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.4.2):
1 2 3 4 5 6 7 8 9 10 | (function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150); }) }) })(jQuery) |
Для тех, кто еще не знает, как подключать этот скрипт - создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.
В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.
HTML-код, который нужно использовать для скрипта
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="section"> <ul class="tabs"> <li class="current">1-я вкладка</li> <li>2-я вкладка</li> </ul> <div class="box visible"> Содержимое первого блока </div> <div class="box"> Содержимое второго блока </div> </div><!-- .section --> |
Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.
Обязательные CSS-стили для вышеуказанного HTML-кода
1 2 3 4 5 6 | .box { display: none; /* по умолчанию прячем все блоки */ } .box.visible { display: block; /* по умолчанию показываем нужный блок */ } |
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.
Примеры
- Живой пример jQuery-вкладок вы можете наблюдать прямо на этом блоге в сайдбаре.
- Отдельный пример, который можно скачать ниже. На этот раз представляю 2 варианта: с горизонтальными и с вертикальными вкладками.
- Еще один пример, в котором запоминается активная вкладка после перезагрузки страницы.
Скачать
Универсальный jQuery-скрипт для блоков с вкладками
Загрузок: 6804 | Размер: 4 Кб
P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)
* * *
Требуется разработка печатного каталога товаров или услуг? Создание каталога в студии «Верстаем.ru» это оптимальное решение!
Наконец то установил работает))) Только не могу отцентровать текст по отношению к фону вкладок. text-align: center; - не помог. Может кто помочь?
Ребят, знаю только html и то так со справочником, прошу можете мне объяснить как мне установить эти вкладки под свой шаблон и по центру? Пожалуйста
я ставил в итоге методом проб и ошибок, в чужом коде и врагу не пожелаешь копаться. советую просто несколько вариантов установки рассмотреть, поэкспереминтировать с кодами. все получится, я также не сильно то шарю в кодах, однако смог). http://tolevbizsystems.com/wordpress/vkladki-na-bloge вот таким путем.
У меня не получилось. Выводятся вкладки вертикально, хотя хотелось бы горизонтально. И содержимое вкладок все отображается. Переключение между вкладками не работает. Стили, которые в этом посте указаны, добавила. В чем может быть проблема?
Дайте адрес страницы, где их установили.
Я делаю на локальном компьютере. Я уже пробовала такой скрипт jQuery UI. И все тоже самое. Может из-за темы?
Действительно из-за темы. Попробовала на другой теме и все получилось.
По теме перепрыгивания вверх при переключении табов.
В комментариях выше был модифицированный скрипт с определением высоты родительского блока, но если например в табы положить меню-аккордеон (оно там прекрасно работает), то при задании фона табам аккордеон будет вылазить за их пределы.
И так как вся соль заключается в установке определённой высоты блоку-родителю, можно поступить проще:
Мне лично помогла установка min-height для родительского блока табов.
2
3
min-height: 1px;
}
проверял в ie7> и нормальных браузерах - вроде бы работает.
Спасибо за скрипт и подробное описание по установке. Установил - все работает!
Возник только 1 вопрос, самый последний WordPress (3.3 или как-то так) при обновлении показывал, что в него уже строен какой-то там jQuery в него уже встроен. Все равно нужно подключать гугловский?
Нет, не нужно.
У меня возникла следующая проблема: когда вкладка неактивная, то надпись начинается с первой позиции; когда навожу мышку на эту вкладку, то надпись смещается, т.е. между рамкой и надписью появляются отступы слева и справа. Получается, что вкладки начиная со второй прыгают, то левее, то правее. Подскажи, что нужно указать в стилях, чтобы этого не происходило. Стили я брала с примеров.
Возможно, что на это влияют другие стили сайта. Можно где-то посмотреть?
Я пока делаю на локальном компьютере. Не подскажите, как при выводе последних записей добавить дату и количество комментариев к записи, как у вас на сайте?
Вот так:
2
3
4
5
6
7
8
<?php if (have_posts()) : ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?> <span><?php the_time('j F Y г.') ?> (<?php comments_number('нет комментов','комментов: 1','комментов: %') ?>)</span></a></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
Спасибо огромное!
Привет Дима. Вопрос? Можно ли отдельно к jQuerry вкладкам применить Css стили отличные от тех, которые используются на сайте. И как это сделать? Проблема в том, что когда применяю стили в том же css? то они влияют и на весь сайт в целом. Заранее спасибо
Похоже, что у вас CSS-классы у табов совпадают с теми, что уже есть на сайте. Значит надо их переименовать, чтобы они были уникальными. Вот классы, которые нужно переименовать (и в CSS-коде, и в HTML-коде):
2
3
tabs
box
Спасибо Дим. Я сам тоже догадался все таки и переделал уже
Жаль в IE не работает, а так отличный вариант.
Должно работать во всех браузерах.
Проверяю в IETester, не в одной версии IE не работает. Можно как нибудь поправить?
Извиняюсь, не работает только в пятой версии (видимо до этого IETester лагал). Но, хотелось бы чтобы и на пятой работало.
что за, извиняюсь, некрофилия….?
даже microsoft даво и официально открестились прекратили поддержку ie6, а вы тут про ie5 говорите))) Неужели где то ещё его используют?
С луны что-ли свалились? =)
Будьте добры, объясните чайнику как создать файл в формате .js :) Если есть возможность, скиньте его пожалуйста на почту, буду очень признателен. В строку ввёл. html код, как я понял, надо ставлять уже в сам виджет, а вот со скриптом запара)
Нужно открыть программу “Блокнот”, либо другой текстовый редактор. Создать новый файл и вставить в него код скрипта. Затем сохранить этот файл с расширением .js.
В статье есть ссылка на скачку.
Пример с куками не работает пот 1.3.2, для полной статьи не хватает :)