Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

jquery tabs

Здравствуйте, сегодня я вам расскажу про универсальные jquery вкладки ( jquery tabs). Так как я занимаюсь web-разработкой, то столкнулся с необходимостью установки вкладок для сайта. В интернете конечно выбор достаточно большой, на любой вкус, но для меня было главное чтобы  никаких конфликтов  со скриптами не было, и чтобы они были достаточно универсальными. И вот наткнулся на пост одного web-разработчика (Дмитрий (a.k.a. Dimox)).

В чем я вижу плюсы данных вкладок:

  • можно создавать не ограниченное количество вкладок;
  • также создавать такие блоки с tab-ами можно сколько душа пожелает:
  • сам скрипт jquery занимает пару строк (размер 0,4 килобайта);
  • есть возможность запоминать активную вкладку после обновления страницы;
  • добавлять якорь к вкладкам (то есть если в адресную строку прописать www.site.com/вкладка2. То при переходе на эту ссылку активной будет вкладка под номером 2);

И так, чтобы посмотреть табы в работе перейдите по нужной вам ссылке ниже.

Пример под номером 1 —> (Простые вкладки)

Пример под номером 2 —> (В этом примере активная вкладка остаеться в таком состоянии и после перезагрузки страницы (с помощью cookie))

Пример под номером 3 —> (Вкладки работают так же как и в примере под номером 2, но только с помощью localStorage (меньше кода по сравнению с вариатом №2))

Пример под номером 4 —> (Это tab-ы с якорем (писал об этом выше) )

Если это именно те jquery табы которые вы искали то перейдем к инструкции по их установлению.

1. Первое что нам нужно, это подключить сам скрипт jquery (возможно у вас он уже подключен) между тегами <HEAD></HEAD> на вашей странице. Лучше всего использовать jquery гугла. Это повысит загрузку, так как большая вероятность того что скрипт уже закеширован у  пользователя. Кроме этого у google всегда стабильный и быстрый  сервер, и гугл отдает его в сжатом виде, то есть он в насколько рас меньше по размеру чем обычный.

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»></script>
*нужно использовать jQuery не ниже версии 1.4.2

2. Ниже находится сам скрипт.

<script>

(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)

</script>

Вы можете вставить его между тегами <HEAD></HEAD> или  можете подключить отдельным js скриптом.

3. Конечно чтобы вкладки отображались на странице нужен 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 —>

Вставьте его в нужном месте на сайте. (как вы можете заметить классы вкладок привязаны к скрипту. Если вы захотите что-то изменить то нужно делать правки и там — и там. )

4. Чтобы tab-ы отображались корректно нужно подключить стили.

.box {
display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
}

По установке мы закончили, теперь все должно работать.

Все примеры вы можете скачать одним архивом. Вот ссылка на скачивание—> 

Если вы хотите действительно удобные и универсальный вкладки то советую использовать именно ЭТИ. Уже не один рас ними пользовался и всегда доволен. Если возникнут трудности пишите в комментарии.