jquery-tab

Создайте плоский HTML-документ, который содержит заголовок и обычное содержимое, превращающееся в стиль вкладки.

Особенности:

• не требуется элемент ссылки, всё ещё дружественный к поисковым системам для исходного контента;
• опции помогают сохранять активную вкладку после обновления страницы или обратной передачи;
• name можно использовать вместо index для отдельного элемента вкладки в некоторых API;
• вертикальный режим метки;
• вложенная вкладка;
• поддержка ARIA.

Использование:

HTML-документ:

<div class="region">
    <h1>title 1</h1>
    <p>tab 1 content</p>
    <p>another tab 1 content</p>

    <h1>title 2</h1>
    <p>tab 2 content</p>
    <p>another tab 2 content</p>
</div>

Код JavaScript:

$('.region').tab({
    fixedHeight: true
    /*, другие опции */
});

Сгенерированная структура HTML:

.region > .tab-container
    > .label-container
        > .label-item
        > .label-item
        > .label-item
        > .label-item
        > ...
    > .panel-container
        > .panel-item
        > .panel-item
        > .panel-item
        > .panel-item
        > ...

label-item и page-item пара — это «элемент вкладки».

Включение CSS:

jquery-tab предоставляет стандартные стили CSS, если вы не хотите создавать их с нуля. Убедитесь, что имена классов CSS не настроены.

Импорт через модуль:

import 'jquery-tab/dist/theme/gray.css';
import 'jquery-tab/dist/theme/effect/fade.css'; // опциональный эффект затухания при переключении, должен загружаться после темы

Используйте отдельный файл CSS:

Скопируйте или обратитесь к файлам CSS из каталога dist/theme/

Вертикальные метки:

Чтобы использовать вертикальные метки, укажите опцию mode как «vertical». Обратите внимание, что вертикальный стиль реализован функциями CSS flex, а это означает, что старые браузеры, такие как IE10-, Chrome 20- и Firefox 27-, не поддерживаются.

$('.region').tab({
    mode: 'vertical'
});

Укажите параметры:

Есть два способа указать параметры. Методом tab() и атрибутом data-.

Укажите параметры методом tab():

Имена параметров пишутся верблюжьим регистром.

<div class="region">
    ......
</div>

$('.region').tab({
    fixedHeight: true
});

Укажите параметры атрибутом data-:

Имена опций становятся атрибутами HTML с префиксом data- на элементе региона. Слова всегда в нижнем регистре и разделены -. Доступно только для примитивного значения опции.

<div class="region" data-fixed-height="true">
    ......
</div>

$('.region').tab();

Автоматическое включение jquery-tab:

Контейнеры регионов, имеющие класс tab-region, будут автоматически применять плагин jquery-tab.

Это было бы удобно, если использовать это имя класса с опциями атрибутов. Тогда в большинстве случаев не нужен код JavaScript:

<div class="tab-region" data-fixed-height="true">
    ......
</div>

Работа с отдельным элементом вкладки:

Свойство элемента вкладки можно указать как атрибут на элементе заголовка, в нижнем регистре, разделяя слова символом -, с префиксом data-.

<div class="region">
    <h1 data-tab-item-name="first-item">title 1</h1>
    <p>tab 1 content</p>
    <p>another tab 1 content</p>

    <h1 data-tab-item-disabled="true">title 2</h1>
    <p>tab 2 content</p>
    <p>another tab 2 content</p>
</div>

Поддерживаемые свойства:
tabItemName (data-tab-item-name)
Имя должно быть строкой без цифр, иначе в параметрах метода контроллера оно будет рассматриваться как индекс.
Имя может содержать только буквы, цифры, дефисы и подчёркивания.
Если имена дублируются в одном контейнере вкладок, будет распознан только первый элемент.
Логику получения имени элемента вкладки можно настроить с помощью опции fnGetTabItemName.

tabItemDisabled (data-tab-item-disabled)
Укажите, отключён ли этот элемент вкладки. Непустое значение будет рассматриваться как отключённое, даже для пустой строки.
Логика определения того, отключена ли вкладка, может быть настроена с помощью опции fnIsTabItemDisabled.

tabItemHidden (data-tab-item-hidden)
Укажите, скрыт ли этот элемент вкладки. Непустое значение будет считаться скрытым, даже для пустой строки.
Логика определения того, скрыта ли вкладка, может быть настроена с помощью опции fnIsTabItemHidden. horizontal (по умолчанию) или vertical.

tabContainerTemplate
Шаблон HTML контейнера вкладки.

tabContainerClass (по умолчанию: tab-container)
Класс CSS для контейнера вкладок.
Если mode — «горизонтальный», то также добавить класс «tabContainerClass-horizontal».
Если mode — «вертикальный», то также добавить класс «tabContainerClass-vertical».

Label

labelContainerTemplate
Шаблон HTML шаблона контейнера метки.

labelContainerClass (по умолчанию: label-container)
Класс CSS для контейнера меток.
если это контейнер меток заголовка, то также добавьте класс «labelContainerClass-header».
если это контейнер меток нижнего колонтитула, то также добавьте класс «labelContainerClass-footer».
Также добавьте режим класса «labelContainerClass-горизонтальный» / «labelContainerClass-вертикальный».
Также добавьте расположение режима «labelContainerClass-заголовок-горизонтальный» / «labelContainerClass-заголовок-вертикальный», «labelContainerClass-нижний колонтитул-горизонтальный» / «labelContainerClass-нижний колонтитул-вертикальный».

showHeaderLabelContainer (по умолчанию: true)
Показывать контейнер метки перед контейнером панели.

showFooterLabelContainer (по умолчанию: false)
Показывать контейнер метки после контейнера панели.

labelItemTemplate
Шаблон HTML элемента метки.

labelItemClass (по умолчанию: label-item)
Класс CSS для элемента метки.
Если это текущий активный элемент метки, то также добавьте класс «labelItemClass-active»,
в противном случае добавьте класс «labelItemClass-inactive».
Если элемент вкладки метки отключен, то также добавьте класс «labelItemClass-disabled».
Если элемент вкладки метки скрыт, то также добавьте класс «labelItemClass-hidden».

Panel

panelContainerTemplate
Шаблоны HTML контейнеров панелей.

panelContainerClass (по умолчанию: panel-container)
Класс CSS для контейнеров панелей.
Также добавить режим класса «panelContainerClass-горизонтальный» / «panelContainerClass-вертикальный».

panelItemTemplate
Шаблоны HTML элементов панели.

panelItemClass (по умолчанию: panel-item)
Класс CSS для элементов панели.
Если это текущий активный элемент панели, то также добавьте класс «panelItemClass-active»,
в противном случае добавьте класс «panelItemClass-inactive».
Если элемент вкладки панели отключен, то также добавьте класс «panelItemClass-disabled».
Если элемент вкладки панели скрыт, то также добавьте класс «panelItemClass-hidden».

Контроллер

Получить контроллер

Получить контроллер вкладки из элемента контейнера вкладки или исходного региона содержимого:

var controller = $('.region').data('tab-controller');
var controller = $('.tab-container').data('tab-controller');

Методы контроллера

Состояния

getCount()
Получить количество элементов вкладки.

getCurrentIndex()
Получить текущий активный индекс элемента вкладки.

Элемент вкладки

getIndexByName(name)
Получить индекс элемента вкладки по name. возвращает -1, если имя не существует.

getName(index)
Получить имя элемента вкладки по индексу.

setName(name|index, newName)
Установить новое имя для конкретного элемента вкладки, имя которого name или индекс которого index.

isDisabled(name|index)
isEnabled(name|index)
Проверить, отключён ли элемент вкладки.
Возвращает логическое значение, если элемент вкладки существует. Возвращает undefined в противном случае.

setDisabled(name|index, isDisabled=true)
setEnabled(name|index, isEnabled=true)
Указать, отключён ли элемент вкладки.

isHidden(name|index)
isVisible(name|index)
Проверить, скрыт ли элемент вкладки.
Возвращает логическое значение, если элемент вкладки существует. Возвращает undefined в противном случае.

setHidden(name|index, isHidden=true)
setVisible(name|index, isVisible=true)
Указать, скрыт ли элемент вкладки.

Доступ к DOM

getHeaderLabel(name|index)
getFooterLabel(name|index)
getHeaderFooterLabels(name|index)
Получить элементы метки заголовка/нижней части страницы по элементу вкладки name или index.

getCurrentHeaderLabel()
getCurrentFooterLabel()
getCurrentHeaderFooterLabels()
Получить текущие активные элементы метки заголовка/нижней части страницы.

getPanel(name|index)
Получить элемент панели по элементу вкладки name или index.

getCurrentPanel()
Получить текущий активный элемент панели.

updateFixedHeight()
Когда содержимое элемента панели динамически изменяется и становится длиннее, используйте этот метод для обновления