Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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; /* по умолчанию показываем нужный блок */
}

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

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

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

 

2 thoughts on “jquery tabs”

  1. Agnes:

    Да действительно очень легкие и простые в установке вкладки, +1

  2. Michaelsow:

    Спасибо за инструкцию, давно искал вкладки с якорем и с легким кодом.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X