Блок с вкладками на jQuery

Банка с зеленым горошкомТема которая не дает покоя многим веб-мастерам - это возможность аккуратного и компактного размещения большого количества текста, изображений и даже видео роликов в пределах одной страницы сайта или блога. Для решения этой задачи, часто используют блоки с вкладками, или как еще говорят: с табами. Такой подход дает возможность добавить на одну веб-страницу достаточно большое количество контента, не ухудшая при этом навигацию по ней, и даже наоборот. Блок вкладок позволяет качественно оформить содержимое страницы, во многом улучшая ее пользовательский интерфейс.
  Вариантов и идей на этот счет в сети очень много и достаточно разных, от самых простых, с применением только возможностей CSS, до весьма объемных скриптов на чистом JavaScript. В этой статье я хочу поделится своей находкой весьма интересного и очень компактного jQuery скрипта для реализации блока с вкладками на сайте или в блоге.
Вот как все работает:
DEMO
 Единственное что я сделал, это не стал использовать для создания меню список <ul> - <li>, как это сделано в оригинале, а сделал все на блоках - <div>.
  Чтобы использовать такой блок у себя на сайте, необходимо первым делом подключить библиотеку jQuery, если этого еще не сделано.
 После этого можно добавить скрипт, который и будет обрабатывать нужные нам события и, собственно, переключать вкладки.
(function($) {
$(function() {
 $('div.intabs').delegate('div:not(.current)', 'click', function() {
  $(this).addClass('current').siblings().removeClass('current')
   .parents('div.allsection').find('div.pagebox').eq($(this).index()).fadeIn(150).siblings('div.pagebox').hide();
 })
})
})(jQuery)
  Пример CSS с DEMO страницы:
.allsection {
 width: 850px;
 margin: 0;
 text-align: left;
 }
.intabs {
 margin: 0;
 padding: 0;
 }
.intabs div {
 float:left;
 cursor: pointer;
 text-align: center;
 font: normal normal 16px Tahoma, sens serif;
 color:#000;
 padding: 7px 10px;
 margin: 0 3px 0 0;
 border-radius: 3px 3px 0 0;
 background: #b8aaed;
 border: 1px solid #836FFF;
}
.intabs div:hover {
 border: 1px solid #A08BED;
 color:#000;
 background: #dbd5ef;
}
.intabs div.current {
 background: #eceaf2;
 border: 1px solid #C4C4C4;
 border-bottom: 1px solid transparent;
}
.pagebox {
 display: none; /*обязательный параметр*/
 padding: 10px;
 color: #000;
 background: #eceaf2;
}
.pagebox.visible {
 display: block; /*обязательный параметр*/
 border-top: 0;
}
  И собственно HTML код, который вставляется уже на страницу и наполняется содержимым.
<div class="allsection"> <!--весь блок-->

<div class="intabs"> <!--кнопки меню-->
<div class="current">Первая</div>
<div>Вторая</div>
<div>Третья</div>
<div>Четвертая</div>
</div> <!--Конец блока кнопок-->

<br clear="all"/> <!--обнуляем обтекания-->

<!-- блоки с контентом--> 
 <div class="pagebox visible">...</div>
 <div class="pagebox">...</div>
 <div class="pagebox">...</div>
 <div class="pagebox">...</div>
</div>
Внутри блоков можно размещать текст, ссылки, изображения. С видео могут возникнуть проблемы, т.к. если проигрыватель установлен на автоматическое воспроизведение, то будут загружаться и проигрываться все ролики одновременно.
 Можно создавать неограниченное количество блоков.

14 комментариев:

  1. Спасибо! У меня все получилось!!! Очень понятно написано!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста :) Рад что пригодилось.

      Удалить
  2. Все таки получилось http://yakushevskaya.blogspot.ru/p/blog-page_22.html (убрала комментарии из CSS табов - строки и /*...*/). Помогло. Спасибо большое.

    ОтветитьУдалить
    Ответы
    1. Ну вот и чудненько, потому что все протестировано и неоднократно :)

      Удалить
    2. Спасибо вам, долго искала такой подход "страницы с вкладками".

      Удалить
  3. У меня получилось меню, но почему-то цвет кнопок жёлтый и кнопки плоские, некрасивые. Как изменить?

    ОтветитьУдалить
    Ответы
    1. Потому что CSS в статье самый простой, для демонстрации работы. Оформление, это личное дело каждого поэтому тут уж кто на что горазд.

      Чтобы изменить внешний вид добавьте или измените желаемые свойства в CSS файле. Чтобы кнопочки не были "плоскими" воспользуйтесь CSS-градиентом http://www.magentawave.com/2012/05/using-gradient-for-design.html

      Удалить
  4. Всё равно ничего пока не поняла, потому что на это "не горазд", но спасибо за начало.

    ОтветитьУдалить
  5. Елена17.05.13, 17:26

    Спасибо! Всё отлично работает!

    ОтветитьУдалить
  6. Здравствуйте, Саша! Пробую на тестовом блоге, пока на работоспособность.Разное количество текста на вкладках, текст виден неправильно.Это можно увидеть при просмотре кода элемента. Тестовый блог ninazorkina.blogspot.com . На первой и второй одинаковое количество строк, на третьей самое большое, на четвертой самое маленькое-так должно быть. Что не так?

    ОтветитьУдалить
  7. Забыла поставить галочку оповещать

    ОтветитьУдалить
  8. Решение нашла. содержание первой вкладки надо повторить дважды: вначале с классом pagebox visible, затем pagebox. теперь нормально

    ОтветитьУдалить
  9. Анонимный29.07.14, 9:23

    Добрый день. Помогите разобраться) есть главное меню с навигацией (ссылками) на другие страницы этого сайта) и я хочу чтобы это меню оставалось на всех страницах сайта при переходе на любую из них) как этого можно добиться?

    ОтветитьУдалить
    Ответы
    1. Что за движок у сайта? Здесь все зависит от исходных данных.

      Удалить

Следующее Предыдущее

BestProject