1.2.17 • Published 2 years ago

ozimnad-tabs v1.2.17

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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.
typedefault - видимость табов(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