Блок с вкладками на 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. Спасибо! У меня все получилось!!! Очень понятно написано!

    ОтветитьУдалить
  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. Спасибо! Всё отлично работает!

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

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

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

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

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

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

      Удалить

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

BestProject