Ozimnad-tabs

Простая и легкая библиотека js-табов.

Особенности

• Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
• Нет жесткой структуры. Нет жесткой привязки в структуре.
• Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку.
• Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение с помощью CSS.

Как работать с библиотекой

1. Скачайте последнюю версию библиотеки
2. Подключите style.css и script.js из папки dist к странице
3. Поместите в ваш html-документ следующую разметку:

<div data-tabs="tabs">
    <!--btns-->
    <button data-tabs="btn">Btn#1</button>
    <button data-tabs="btn">Btn#2</button>
    <button data-tabs="btn">Btn#3</button>
    <!--btns END-->
    
    <!--tabs-->
    <div data-tabs="tab">Tab#1</div>
    <div data-tabs="tab">Tab#2</div>
    <div data-tabs="tab">Tab#3</div>
    <!--btns END-->
</div>

4.Разместите следующий JS-код для подключения табов:

new OzimnadTabs();

5.Настройки:

| Свойство | Описание | |-----------------|-----------------------------------------------------------------------------------------------------------| | selector | Строка с селектором CSS, который указывает на ваши табы или уже выбранный элемент DOM. | | btnSelector | Строка с селектором CSS, который указывает на кнопки в текущих табах. | | tabSelector | Строка с селектором CSS, который указывает на вкладки в текущих табах. | | activeIndex | Число активного таба, начинается с 0. | | type | default - видимость табов(display: none;)absolute - видимость табов(position: absolute; opasity: 0;) |

Пример:

new OzimnadTabs({
    selector: '.jsTabs',
    activeIndex: 1
});

Важно

Дата атрибуты обязательны и их нельзя менять, если не указаны соотвествующее свойство. Количество кнопок должно быть равным количеству табов.