Универсальный jQuery-скрипт для блоков с вкладками (табами)
С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.
Почему я называю свой новый скрипт для jQuery-вкладок универсальным:
- он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
- можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
- содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Что ж, хватит сухих слов, переходим к сути.
Код jQuery-скрипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
<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 Кб).
Вот такой у меня получился скрипт:
(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’).eq(i).fadeIn(150).siblings(‘div.box’).hide();
});
});
});
})
})(jQuery)
$(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’).eq(i).fadeIn(150).siblings(‘div.box’).hide();
});
});
});
})
})(jQuery)
Добавлено 07.03.10 (обновлено 02.06.12)
В комментариях подсказали еще более сокращенный вариант этого скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.4.2):
(function($) {
$(function() {
$(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
$(this).addClass(‘current’).siblings().removeClass(‘current’)
.parents(‘div.section’).find(‘div.box’).eq($(this).index()).fadeIn(150).siblings(‘div.box’).hide();
})
})
})(jQuery)
$(function() {
$(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
$(this).addClass(‘current’).siblings().removeClass(‘current’)
.parents(‘div.section’).find(‘div.box’).eq($(this).index()).fadeIn(150).siblings(‘div.box’).hide();
})
})
})(jQuery)
Для тех, кто еще не знает, как подключать этот скрипт – создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.
В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.
HTML-код, который нужно использовать для скрипта
<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 –>
<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-кода
.box {
display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
}
display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
}
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.
Примеры
Your browser does not support iframes.
Скачать
Соль жизни в том, что она не сахар!
