1.2.17 • Published 2 years ago
ozimnad-tabs v1.2.17
Ozimnad-tabs
Простая и легкая библиотека js-табов.
Особенности
- Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
- Нет жесткой структуры. Нет жесткой привязки в структуре.
- Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку.
- Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение с помощью CSS.
Как работать с библиотекой
- Скачайте последнюю версию библиотеки
- Подключите
style.css
иscript.js
из папкиdist
к странице - Поместите в ваш 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
});
Важно
Дата атрибуты обязательны и их нельзя менять, если не указаны соотвествующее свойство.
Количество кнопок
должно быть равным количеству табов
.
1.2.0
2 years ago
1.2.1
2 years ago
1.2.13
2 years ago
1.2.11
2 years ago
1.2.16
2 years ago
1.2.17
2 years ago
1.2.14
2 years ago
1.2.15
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.92
2 years ago
1.1.91
2 years ago
1.1.93
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago