QAlt / Полезные статьи, скрипты / 13 июня 2013г, четверг

Табы (вкладки) на jquery

Очень часто необходимо разместить много информации на очень ограниченном пространстве. Один из способов организации текста на html странице - это вкладки или, как их ещё называют, "табы".

Студия Лебедева организовала  "правильные" вкладки. Мой вариан тех же табов, но для jQuery.

Построение валидных вкладок для библиотеки jQuery:

JavaScript:

  $(function(){
  
      function Make_Tabsheet(){
          var i, j, k, iMax_height, iDT_height;
          $('dl').each(function(i){
               iMax_height=0;
               iDT_height=20;
               var bFirst_tab = true;
               $(this).children('dt').mousedown(function(){;
               Switch_sheet(this);
          });
          $(this).children('dd').each(function(j){
               if( $(this).height() > iMax_height ){
                   iMax_height = $(this).height();
               }
               if( !bFirst_tab ){
                     $(this).addClass('inactive');
               }else{
                     $(this).addClass('active');
                     bFirst_tab = false;
               }
              });
              $(this).height((iMax_height + iDT_height)*1+'px');
              $(this).children('dd').height(iMax_height + 'px');
              return true;
          });
      }
           
      function Switch_sheet( dt ){
          $(dt).siblings('dt').removeClass('on');
          var dd=$(dt).next('dd');
          $(dt).siblings('dd').not(dd).removeClass('active').addClass('inactive');
          $(dt).addClass('on');
          $(dd).removeClass('inactive').addClass('active');
          return false;
      }
           
      Make_Tabsheet();
           
  });

Стили:

  .tabsheets,
  .tabsheets dt,
  .tabsheets dd
  {
    margin: 0;
    padding: 0;
    width: auto;
    border: none;
  }
  dl.tabsheets dt,
  dl.tabsheets dd
  {
    background-color: ThreeDFace;
    color: ButtonText;
    border: 1px solid ThreeDFace;
    border-top-color: ThreeDHighlight;
    border-right-color: ThreeDShadow;
    border-bottom-color: ThreeDShadow;
    border-left-color: ThreeDHighlight;
  }
  .tabsheets
  {
    position: relative;
    padding: 0;
    margin-bottom: 10px;
  }
  .tabsheets dt
  {
    float: left;
    padding: 0.2em 1em;
    cursor: default;
    white-space: nowrap;
    margin-top: 0.1em;
    margin-bottom: -0.2em;
  }
  .tabsheets dt.on
  {
    background-color: ButtonHighlight;
    color: ButtonText;
    margin-top: 0;
    padding-bottom: 0.3em;
  }
  .tabsheets dd
  {
    position: absolute;
    width: 100%;
    display: block;
    left: 0;
    margin: 1.6em 0 1em 0;
    padding: 0;
  }
  .tabsheets dd .reducer
  {
    margin: 1em;
  }
  .tabsheets dd.inactive
  {
    display: none;
  }
  .tabsheets dd.inactive iframe,
  .tabsheets dd.inactive select,
  .tabsheets dd.inactive textarea,
  .tabsheets dd.inactive input
  {
    display: none !important;
  }
  .tabsheets dd.active
  {
    display: block;
  }
  .tabsheets .reducer
  {
    margin: 1em;
  }

и, наконец, html:

<dl class="tabsheets" dt="">
  <dt>закладка 1<dt>
  <dd>текст вкладки 1</dd>
  <dt>закладка 2</dt>
  <dd>текст вкладки 2</dd>
  <dt>закладка 3</dt>
  <dd>текст вкладки 3</dd>
</dl>

Вот и всё! Валидные вкладки готовы к работе.

Пример работы вкладок

Описание
Организация правильных (валидных, кроссбраузерных) вкладок, табов
Возможности
  • Простота использования
  • Широкая настройка
  • Правильная работа
  • Легко читаемый код шаблона
Скачать
Скачать Правильные вкладки на jQuery 1.0

Список всех статей »

home

Quality Alt
Разработка сайтов и
web-интерфейсов

8 923 232-88-90