Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 

Табы на jQuery

CDN

  <script src="https://cdn.jsdelivr.net/gh/VladimirIvanin/dataTabs@0.11.5/dist/dataTabs.js"></script>

Настройки

Параметр Тип Значение поумолчанию Описание
event string 'click' Событие по которому будет происходить переключение табов.
prevent boolean true Использовать preventDefault?
onInit function - Callback инициализации плагина.
initOpenTab boolean true Открывать активный таб при инициализации?
activeIndex number 1 Активный элемент
autoSwitching boolean false Авто переключение
speedSwitching number 10000 скорость авто переключения
hideOnClosest boolean false Закрыть содержимое при клике вне родительского DOM элемента (активно в режиме accordion)
useJqMethods boolean true Использовать jQuery методы анимаций?
jqMethodOpen string fadeIn jQuery метод открытия
jqMethodClose string hide jQuery метод закрытия
pauseVideoAudio boolean true Cтавить на паузу аудио и видео при переключении табов?
state string 'tab' Режим плагина tab/accordion
onTab function - Callback при нажатии на переключатель. Возвращает (self, $anchor, $target)
onMouseover function - Навели курсор на блок табов
onMouseout function - Убрали курсор с блока табов
classes object hover: 'is-data-tabs-hover'
activeButton: 'is-button-active'
closeButton: 'is-button-close'
activeTab: 'is-tab-active'
closeTab: 'is-tab-close'
Классы состояний

Разметка

Для связки переключателей и блоков иcпользуются data атрибуты:

  • data-tabs-container - дата атрибут контейнера.

  • data-tab-anchor - дата атрибут переключателей.

  • data-tab-target - дата атрибут блоков содержимого.

  • data-tab-active - дата атрибут активного элемента. В state == 'accordion' activeIndex = null;

Значения атрибутов переключателей и блоков содержимого должны быть идентичны

Все data атрибуты обязательны!

Пример

Онлайн пример табов на codepen.io.

Онлайн пример аккордеона на codepen.io.

Онлайн пример переключения по наведению курсора на codepen.io.

<!--
Для инициализации плагина используется селектор контейнера (data-tabs-container).
В данном случае это $('.js-tabs')
-->
<div class="js-tabs" data-tabs-container>
  <div>
    <button data-tab-anchor="1" type="button" name="button" class="js-tabs-item">
      Первая вкладка
    </button>
    <button data-tab-anchor="2" type="button" name="button" class="js-tabs-item">
      Вторая вкладка
    </button>
  </div>


  <div>
    <div data-tab-target="1">
      Содержимое первой вкладки
    </div>
    <div data-tab-target="2">
      Содержимое второй вкладки
    </div>
  </div>
</div>
$('.js-tabs').dataTabs();