https://github.com/findawayer/skeletabs
Basic, accessible, responsive and freely restyleable tabs.
https://github.com/findawayer/skeletabs
javascript jquery jquery-plugin tabs
Last synced: 6 months ago
JSON representation
Basic, accessible, responsive and freely restyleable tabs.
- Host: GitHub
- URL: https://github.com/findawayer/skeletabs
- Owner: findawayer
- License: mit
- Created: 2017-03-08T06:37:36.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T13:48:08.000Z (over 3 years ago)
- Last Synced: 2025-10-02T18:22:48.771Z (9 months ago)
- Topics: javascript, jquery, jquery-plugin, tabs
- Language: JavaScript
- Homepage: https://findawayer.github.io/skeletabs/
- Size: 1.19 MB
- Stars: 20
- Watchers: 2
- Forks: 4
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [Skeletabs](https://findawayer.github.io/skeletabs/) · [](https://github.com/findawayer/skeletabs/blob/master/LICENSE)
Skeletabs is an open source **jQuery plugin** that provides tabbed browsing feature to your web contents. It is focused on **accessibility** and **scalability** above all else, and is designed to support convenience of screen readers and keyboard users, as well as to encourage developers' creative uses.
- [Documentation](https://findawayer.github.io/skeletabs/)
- [Demo](https://findawayer.github.io/skeletabs/#Demo)
- [Options](https://findawayer.github.io/skeletabs/#Options)
- [Methods](https://findawayer.github.io/skeletabs/#Methods)
- [Events](https://findawayer.github.io/skeletabs/#Events)
- [Themes](https://findawayer.github.io/skeletabs/#Themes)
- [Transition effects](https://findawayer.github.io/skeletabs/#Transition-effects)
- [FAQ](https://findawayer.github.io/skeletabs/#FAQ)
> Skeletabs works on all ECMAScript 5 compliant browsers. We have no plan to support IE 8 and prior that are unable to parse compressed source codes.
> v1.7.0 and higher versions are supported. (slim versions provided with v3.x will not work.)
## Get started
Please download [the latest version of Skeletabs](https://github.com/findawayer/skeletabs/releases). Ready-to-use resources are located in `/dist` folder.
```html
```
- Embed downloaded resources like above.
- Skeletabs expects jQuery to be loaded beforehand.
- The CSS file contains opinionated themes and effects. You don't need to include it if you are going to create your own look and feel.
## HTML
Skeletabs parses the HTML structure based on class attributes. Please assign relevant classes to your elements within the tree.
```html
-
{{Tab 1}}
-
{{Tab 2}}
{{Panel 1}}
{{Panel 2}}
```
The plugin generates an `id` for all tabs and panels to meet the accessiblity requirements. (Unless they're already given one.)
```html
{{Panel 1}}
{{Panel 2}}
```
You can add any wrapping elements between the panelGroup and the panels. Please note that panels should stay siblings.
## CSS
The plugin comes with a couple of built-in themes: light / dark. You can enable them just by adding a CSS class with `skltbs-theme-` prefix to the container element.
```html
...
```
Likewise, 4 different types of effect are available — fade / fade-toggle / drop / rotate — which can be applied using a `use-` prefixed class.
```html
...
```
## JS
Once DOM is ready, you can now initialize Skeletabs like next:
```js
$('#container').skeletabs();
```
And below is the configuration syntax for custom options:
```js
$('#container').skeletabs({
startIndex: 2,
});
```
## Autoinit without JS
You can omit the JS portion descripbed above and activate Skeletabs by using `data-skeletabs` attribute of the container element.
```html
...
```
`data-skeletabs` attribute accepts a JSON object to configure custom options.
```html
...
```
`data-skeletabs-class` attributes is used to configure custom CSS class names.
```html
...
```
```html
...
```
- A JSON object will modify classes that match the object keys.
- A string will replace `skltbs` prefix.