Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wahawaher/flextabs-js

jQuery FlexTabs - плагин, для создания адаптивных вкладок (табы, аккордеон, спойлер)
https://github.com/wahawaher/flextabs-js

accordion flextabs javascript jquery spoiler tabs

Last synced: 3 months ago
JSON representation

jQuery FlexTabs - плагин, для создания адаптивных вкладок (табы, аккордеон, спойлер)

Host: GitHub
URL: https://github.com/wahawaher/flextabs-js
Owner: WahaWaher
Created: 2018-08-12T16:24:32.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-03-04T00:55:03.000Z (almost 2 years ago)
Last Synced: 2024-10-11T12:03:20.188Z (3 months ago)
Topics: accordion, flextabs, javascript, jquery, spoiler, tabs
Language: JavaScript
Homepage:
Size: 2.82 MB
Stars: 9
Watchers: 3
Forks: 6
Open Issues: 5
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

jQuery FlexTabs Plugin ^2.0.0
-------
[![](https://data.jsdelivr.com/v1/package/npm/flextabs-js/badge)](https://www.jsdelivr.com/package/npm/flextabs-js)

_**jQuery-плагин**, для создания адаптивных вкладок (**табы**, **аккордеон**, **спойлер**)_

* Два режима отображения: tabs, accordion + (accordion с одной вкладкой в качестве спойлера)
* Адаптивный режим. Трансформация табов в аккордеон и обратно (произвольно или при заданной ширине окна браузера)
* Поддержка тем оформления (стили темы вынесены в отдельный файл)
* Гибкая система методов/событий для программного управления состояниями
* Пользовательская анимация при открытии/закрытии вкладок и смене режима

[Демо: Стандартный вариант](https://wahawaher.github.io/flextabs-js/demo-default.html) | [Демо: Анимация](https://wahawaher.github.io/flextabs-js/demo-animation.html) | [Документация](https://wahawaher.github.io/flextabs-js/)

## CDN:
[https://www.jsdelivr.com/package/npm/flextabs-js?path=dist](https://www.jsdelivr.com/package/npm/flextabs-js?path=dist)

## Пакетные менеджеры:
```sh
# YARN
yarn add flextabs-js

# NPM
npm i flextabs-js
```

## Подключение:

1. Подключить скрипты и стили:
```html

```
2. Инициализировать плагин на группе элементов:
```javascript
$('[data-ft]').flexTabs({
// Параметры...
});
```
3. Применить в HTML:
```html

Вкладка #1
Вкладка #2
Вкладка #3

Содержание вкладки #1

Содержание вкладки #2

Содержание вкладки #3

```
Другие варианты разметки см. [Документацию](https://wahawaher.github.io/flextabs-js)

## Зависимости:
- [jQuery](http://jquery.com/download/) (тестировался на версии 3.3.1)

## Поддержка
Решение проблем/багов плагина, а также замечания и пожелания в [соответствующей теме](https://github.com/WahaWaher/flextabs-js/issues)

По всем другим вопросам: [[email protected]](mailto:[email protected] "Написать на [email protected]")

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.